<aside> 💡 This article will outline the 4 steps to integrate Gander on Webflow

</aside>

1. Setup Overlay Mode for Videos

• Follow these steps until the section titled “Add New Variables” to install Google Tag Manager on your store if you have not already

• Login to Google Tag Manager

• Click on “Add a new tag” to create a new tag

  

• Create a new tag called “Gander”

  

• Tag Configuration: Please select “Custom HTML” You can search instead of manually looking for itAdd the following code snippet to the "Custom HTML" field

  

  <link href="<https://widget.gogander.online/static/css/index.css>" rel="stylesheet" />
  <script src="<https://widget.gogander.online/static/js/index.js>"></script>
  

  

• Triggering: Create a "Initialization" Trigger

• To add a new trigger click on Triggering

  

• Click on 'Choose a trigger to make this tag fire...' and on side drawer click on + plus icon

  

• Name the trigger “Initialization - All Pages"

• Select the “Initialization" trigger

  

Select trigger type 'Window Loaded' if you want to load videos after all other page elements loaded.

• After adding the trigger, click “Save” on top right corner

  

• After saving from previous screen, select the newly created trigger and save again, here is how our final changes should look:

  

Once you have saved the Tag, please link videos to pages using Gander dashboard. To do this, please reference the steps in the article here