Embed an Iframe

For demonstration purposes, we will use the Chrome Browser and embed this app in an iframe, we will use the GSMA RAI Maturity Self-Assessment Tool page as an example.

Once the page has loaded (password & UN are ‘gsma’), open the developer tools in your browser (press the F12 key) and inspect document to find the iframe element.

Steps to Embed an Iframe

Run the iframe dev server locally by running the following command in the terminal:
Terminal window
```
pnpm dev:iframe
```

Change the iframe attributes to the following:

 <iframe src="https://dev.gsma.com/solutions-and-impact/connectivity-for-good/external-affairs/responsible-ai/verified-assessment/iframe/"
 <iframe src="http://localhost:3000"
        title="RAI maturity self-assessment"
        style="width: 100%; min-height: 800px; padding:0;
        style="width: 100%; min-height: 85.5vh; padding:0;
               border: 0; margin: auto; display: block;">
</iframe>

In the Chrome Devtools Styles tab, you can see the CSS that is applied to the iframe, uncheck - max-width: 75%;

This will allow the iframe to take up the full width of the page.

So it looks like this:

Result