> For the complete documentation index, see [llms.txt](https://docs.dinesafe.com/dinesafe-knowledge-base/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dinesafe.com/dinesafe-knowledge-base/iwp-reporting-widget/embedding-the-widget/when-to-use-simple-embedding-code-vs-advanced-embedding-code/benefits-of-the-advanced-embedding-code.md).

# Benefits of the Advanced Embedding Code

1. **Responsive Design:**
   * The advanced code includes styling that ensures the iframe is responsive, adjusting to different screen sizes. This makes it ideal for use on websites with varying display environments, such as mobile devices or tablets.
2. **Accessibility:**
   * The advanced code includes a `title` attribute for the iframe and a fallback `<p>` element for browsers that do not support iframes, improving accessibility and ensuring that users can still access the form even if their browser has limitations.
3. **Custom Styling:**
   * The use of CSS allows for more customization of the widget's appearance. The `.widget-container` class centers the iframe and ensures it fits within the specified dimensions, offering a more polished user experience.
4. **Lazy Loading:**
   * The `loading="lazy"` attribute delays the loading of the iframe until it is in view, which can present an even faster page load time in some cases.

#### Advanced Embedding:

{% code overflow="wrap" %}

```html
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Food Safety Reporting Widget</title>
    <style>
        .widget-container {
            width: 100%;
            height: 100vh;
            max-width: 450px;
            max-height: 650px;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .widget-iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>
</head>
<body>
    <div class="widget-container">
        <iframe 
            src="https://iwaspoisoned.com/widget/gov/46?id=dinesafe-test1&form=1" 
            class="widget-iframe"
            title="Food Safety Report Form"
            sandbox="allow-scripts allow-same-origin allow-forms"
            loading="lazy"
        >
            <p>Your browser does not support iframes. Please visit <a href="https://iwaspoisoned.com/widget/gov/46?id=dinesafe-test1&form=1">our reporting form</a> directly.</p>
        </iframe>
    </div>
    <script>
        window.addEventListener('message', function(event) {
            if (event.origin !== 'https://iwaspoisoned.com') return;
            // Handle any postMessage events from the iframe here
        }, false);
    </script>
</body>
</html>
```

{% endcode %}
