Embed Widget (Resizable)

To embed the EventNook widget in your website and ensure it auto-resizes based on content length, follow these steps:

1. Insert the Widget Iframe: Copy and paste the following iframe code into your HTML where the widget should appear:

   <iframe
       id="eventnookWidget"
       src="YOUR_EVENTNOOK_WIDGET_URL"
       scrolling="no"
       width="100%"
       frameborder="0"
       style="border:none;"
       data-ticket-widget="eventnook"
   ></iframe>
   
   <!--- add the following script right after the iframe or in the head tag or at the end of the page --> 
    <script>
     document.addEventListener('DOMContentLoaded', () => {
       window.addEventListener('message', event => {
         if (!event.data || event.data.type !== 'iframeResize') {
           return;
         }
   
         // Retrieve the iframe by data-ticket-widget
         const iframes = document.querySelectorAll('iframe[data-ticket-widget="eventnook"]');
         iframes.forEach(iframe => {
           if (iframe.contentWindow === event.source) {
             iframe.style.height = `${event.data.height}px`;
           }
         });
       });
     });
     </script>

   Replace YOUR_EVENTNOOK_WIDGET_URL with the specific URL provided for your event.

This setup allows the EventNook widget to adjust its height dynamically to fit the content, accommodating any changes in ticket lists or registration forms.

Here is the sample code with a Live event widget.

<!-- REPLACE your event ticket widget URL in iframe src="YOUR_EVENTNOOK_WIDGET_URL" -->

<iframe
    id="eventnookWidget"
    src="https://reg.eventnook.com/e/eid_Mzc0NzXWtQyNcooEAA"
    scrolling="no"
    width="100%"
    frameborder="0"
    style="border:none;"
    data-ticket-widget="eventnook"
  ></iframe>

<!--- add the following script right after the iframe or in the head tag or at the end of the page -->
 <script>
  document.addEventListener('DOMContentLoaded', () => {
    window.addEventListener('message', event => {
      if (!event.data || event.data.type !== 'iframeResize') {
        return;
      }

      // Retrieve the iframe by data-ticket-widget
      const iframes = document.querySelectorAll('iframe[data-ticket-widget="eventnook"]');
      iframes.forEach(iframe => {
        if (iframe.contentWindow === event.source) {
          iframe.style.height = `${event.data.height}px`;
        }
      });
    });
  });
  </script>