Add Widgets to WIX Sites

WIX as a CMS system has a slightly different way to add widgets to a page than other CMS systems. To add the configuration code is the same logic as usual.

Add the Bilberry Configuration Code

1. In WIX, navigate to Settings → Advanced → Custom Code.

2. Click Add custom code.

3. In Base, navigate to Widgets → Widget Settings.

4. Review the Quick Setup tab and ensure all is correct (colors, url to terms/privacy, logo url etc.).

5. Click the Embed Code tab.

6. Copy both blocks of code (Configuration script and Colors and fonts).

7. In WIX, paste the two blocks of codes into the section where it says to paste the code snippet.

Remember to always paste the Configuration script first and on top in the section, and the Colors and fonts code below.

8. Name the custom code Bilberry Config Code for easy recognition.

9. Select the option to add codes to All pages and Load code once.

10. Select the option to paste the code in Head.

11. Click Apply.

Add Widgets to Sub Pages

WIX does not support to view widgets in preview mode. The easiest thing to do is to create a test page and publish this to check if the widgets show up and how it looks.

Create a Test Page

1. Click on Page → Manage Pages → Add Page.

2. Once the page is created, click on the three dots and select hide.

Once you add widgets, you’ll have to publish and go to the page URL, and refresh to see the widgets.

Add the Widget

1. Go to your Test Page (or new product sub-page).

2. Click Add Element → Custom Element.

3. Select Choose Source.

4. Select the option to add your script file with Server URL.

5. Copy and paste the Server URL found in the widget library for the specific widget that is being implemented.

6. Scroll down to Tag Name.

7. Copy and paste the Tag Name found in the widget library for the specific widget that is being implemented.

8. Exit out of the window.

9. Click the Set Attributes tab → Set Attributes.

10. Copy and paste the required Attribute Name found in the widget library for the specific widget that is being implemented.

11. Set the Value to be the product ID of the product that the widget is being connected to.

12. Repeat if several widgets are being implemented.

When the page is ready, it is needed to publish the page to view the widget. In order to check if the connection was properly done, visit the page URL.