Skip to main content
All CollectionsGeoBoosterUsing Geobooster on Website
Adding the GeoBooster widget to the Wix website
Adding the GeoBooster widget to the Wix website

How to add the GeoBooster widget to any given place of your Wix website.

S
Written by Sebastian Donnelly
Updated over a year ago

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

  1. Go to https://users.wix.com/signin and sign in with your administrator credentials.

  2. Select your website on the "Sites" page and click on the "Select & Edit site" button.
    ​

  3. You will be redirected to your website dashboard. Click "Settings" in the side menu to the left.
    ​

  4. Scroll down to the "Advanced" section, and click the "Custom code" button.
    ​

  5. On the "Custom Code" page click the "Add Custom Code" button.
    ​

  6. Return to Local Brand Manager, go to GeoBooster->Widgets, click on your widget, go to the "Embed code" section, and copy the widget code snippet.
    ​

  7. Return to Wix. Fill out the "Add Custom Code" dialog as shown below. Paste the widget script in the field "Paste the code snippet here", 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.

    ​

  8. Add to the widget snippet the line data-container-id="gb_widget", so your widget code will look like this:
    ​<script

    id="gb_widget_script"

    type="module"

    src="https://gb-widget.localbrandmanager.com/gb-widget.js"
    data-container-id="gb_widget"

    data-widget-token="1234567890123456789abcdef">

    </script>

  9. Click the "Apply" button.

  10. Click the "Site & App"->"Website" in the side menu to the left.
    ​

  11. Click the "Edit Site" button.
    ​

  12. Wix editor opens. Select the page you want to add the widget to from the dropdown.
    ​

  13. Add a new blank section to the website layout at the place where you want to add the widget: click the "+ Add Section" button, then select the "+ Blank Section" in the side menu.

  14. Click the "Add Elements" button in the toolbar.
    ​

  15. Select "Embed Code"->"Custom"->"Custom Element".
    ​

  16. A new custom element will be added to the website layout. Please adjust its size if you need to.
    ​

  17. Click the "Set Attributes" button.
    ​

  18. The "Element Attributes" dialog opens. Click the "Set Attributes" button.
    ​

  19. Set "Attribute name" equal to id and "Value" equal to gb_widget, then click the "Set" button.
    ​

  20. Click the "Choose Source" button.
    ​

  21. The "Element Attributes" dialog opens. Scroll it down, set the "Tag name" equal to gb-widget then press "Enter" and close the dialog.
    ​

  22. Click the "Save" button in the top toolbar, then the "Publish" one.
    ​

  23. Congratulations! You've successfully embedded the GeoBooster widget into your website.

Did this answer your question?