Dinesafe Knowledge Base
  • Welcome
  • Return to DineSafe.com
  • Real-Time Norovirus Surveillance
    • Introduction
  • Methodology
  • Data Collection & Processing
  • Metrics & Indicators
  • Implementation Guidelines
  • FAQs
  • Benchmarking
    • Introduction
      • The Importance of Food Safety
      • Introduction to Our Benchmarking System and Its Purpose
      • Why Food Safety Benchmarking Matters: A Stakeholder Overview
    • Methodology & Systems
      • The Metrics We Use
        • Reports per 100 Stores
        • Reports per $1M Revenue
        • Persons Reported Sick per 100k Customers Served
      • Data Sources & Methodology
        • How We Gather Data
        • Estimating Data When Exact Figures Aren't Available
        • Ensuring Accuracy and Transparency
      • Our Benchmark Indexing System
        • Why We Use Indexing
        • Index Composition
        • Index Calculation Process
        • Understanding Index Comparisons
    • Case Study
      • Case Study - Chipotle Mexican Grill
    • Applications
      • Global Applicability of Our Benchmarking System
      • Product-Specific Benchmarking for Food Producers
    • Service Information
      • Why Subscribe to Our Benchmarking Service
      • Limitations & Considerations
      • Conclusion
      • FAQ
        • Q1: How often are the benchmarks updated?
        • Q2: Are the food poisoning reports reviewed before being included in the benchmarks?
        • Q3: How do you account for differences in restaurant size when comparing benchmarks?
        • Q4: Can restaurants submit their own data to improve the accuracy of the benchmarks?
        • Q5: How do your benchmarks relate to official health inspections and ratings?
        • Q6: How can businesses improve their benchmark scores?
  • Data Dictionary
    • Introduction
    • Primary Fields
    • Specialized Fields
    • Delivery Methods
    • Glossary
    • Further Questions
  • IWP Reporting Widget
    • Introduction
    • Why Our Widget? Key Features & Benefits
    • Embedding the Widget
      • How to Embed the Code
      • When to Use Simple Embedding Code vs Advanced Embedding Code
        • Benefits of the Advanced Embedding Code
        • Considerations When Using the Advanced Embedding Code
      • Test the Code
      • Standalone URL Option
      • Customization Options
      • Language Support
      • Mobile-Friendly Link
    • Data Management and Access
    • Compliance with FDA’s Voluntary National Retail Food Regulatory Program Standards
    • Examples of Embedded Widgets
    • FAQ
      • Q1: Who can use the Iwaspoisoned.com reporting widget and what is it?
      • Q2: How do I embed the widget on my website?
      • Q3: Is the widget customizable?
      • Q4: How do I access the reports?
      • Q5: How does the widget support FDA compliance?
  • Email Notifications
    • Introduction
    • Widget Email Alerts
Powered by GitBook
On this page

Was this helpful?

  1. IWP Reporting Widget
  2. Embedding the Widget
  3. When to Use Simple Embedding Code vs Advanced Embedding Code

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:

<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?=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?=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>
PreviousWhen to Use Simple Embedding Code vs Advanced Embedding CodeNextConsiderations When Using the Advanced Embedding Code

Last updated 1 month ago

Was this helpful?