Adding the GrowthBooster widget to the Wix website

We assume that you have already configured your GrowthBooster JS widget and now you want to add it to your Wix website.

Go to https://users.wix.com/signin and sign in with your administrator credentials.
Select your website on the "Sites" page and click on the "Select & Edit site" button.
You will be redirected to your website dashboard. Click "Settings" in the side menu to the left.
Scroll down to the "Advanced" section, and click the "Custom code" button.
On the "Custom Code" page click the "Add Custom Code" button.

Copy this code

    <script
      id="gb_widget_script"
      type="module"
      src="https://locations.linda.co/gb-widget.js"
      data-skip-autostart>
    </script>

    <script>
      window.initGeoboosterWidget = (config) => {
        if (!window.GeoboosterWidgetInterface) {
          console.error('GB-WIDGET: no geobooster script found on page')
          return
        }

        const currentWidgetVueApp = GeoboosterWidgetInterface.vueApp()

        if (currentWidgetVueApp) {
          currentWidgetVueApp.unmount()
        }

        const initialWidgetConfig = {
          widgetToken: '', // your widget token over here
          containerId: 'gb-widget' // id of the element you want widget to be mounted in
        }

        GeoboosterWidgetInterface.start(initialWidgetConfig)

        setTimeout(() => {
          // for some reason, refetch doesn't happen when we change the page of the WIX site
          // unless we do it like that (manually)
          GeoboosterWidgetInterface.refetch() 
        }, 1000)
      }

      if (
        document.readyState === 'complete' ||
        document.readyState === 'loaded' ||
        document.readyState === 'interactive'
      ) {
        window.initGeoboosterWidget()
      } else {
        document.addEventListener('DOMContentLoaded', () => {
          window.initGeoboosterWidget()
        })
      }
    </script>

Paste it into some text editor on your computer
Return to Linda, go to GrowthBooster->Widgets, click on your widget, go to the "Embed code" section, and copy data-widget-token value from the widget code snippet.
Paste the data-widget-token value into the script from the step 6.
Copy the modified script.
Return to Wix and paste it into the textarea on the "Add custom code" dialog, specify the name of the snippet (for example, GB Widget), select the page to add the widget to, and place to add the widget code, we used "Body - end" here.
Note: for one widget you need to create one custom code, so if you use the same widget on different pages you need only one custom code.
Click the "Apply" button.
Click the "Site & App"->"Website" in the side menu to the left.
Click the "Edit Site" button.
Wix editor opens. Select the page you want to add the widget to from the dropdown.
Add a new blank section to the website layout where you want to add the widget: click the "+ Add Section" button, then select the "+ Blank Section" in the side menu.
Click the "Add Elements" button in the toolbar.
Select "Embed Code"->"Custom"->"Custom Element".
A new custom element will be added to the website layout. Please adjust its size if you need to.
Click the "Set Attributes" button.
The "Element Attributes" dialog opens. Click the "Set Attributes" button.
Set "Attribute name" equal to id and "Value" equal to gb-widget, then click the "Set" button.
Click the "Choose Source" button.
The "Element Attributes" dialog opens. Scroll it down, set the "Tag name" equal to gb-widget then press "Enter" and close the dialog.
Click the "Save" button in the top toolbar, then the "Publish" one.
Congratulations! You've successfully embedded the GrowthBooster widget into your website.