Adding your snippet is done via Custom Embedded Elements. Wix displays the widget iframe inside a Wix iframe (thus sandboxed) and although this works perfect for displaying the widget on your page, it doesn’t allow for properly displaying a selected item in a Lightbox display. The size of the Lightbox is limited to the size of the area created for displaying your widget.

We therefore suggest that you create your widget on your SnapWidget dashboard with an Photo Popup instead of a Lightbox display for the Photo Link.
​

To add the widget snippet to your site we won’t be using the full snippet code as we would normally do. The normal widget contains all the links to the JS and CSS files. For WIX we will only use the <iframe> line with some changes made to the contents. The two widgets we will be using are the Grid and the SlideShow widgets.

The process of adding your widget is the same for pages as well as blog posts.

The following code is the contents of the responsive widgets with the Photo Link set as Photo Popup (This is the same for both Grid and SlideShow widgets, only the SnapWidget ID differs).

For WIX we are not going to populate any Custom HTML textboxes, we are only going to enter a website address (URL) to display your widget, so we will create the URL of the widget using the contents of the iframe tag. This will then become the following, again the same for both widgets, only the SnapWidget ID differs. We won’t be using the iframe width setting, the setting will be done in the editor. The only part we are using to form the URL is the iframe src (the absolute path) as well as the class name (the parameter) separated by ?.

Log into your Wix website. On your dashboard click on Website under Site & App and select Edit Site.

Click on the Pages & Menu option.

In the Site Menu, select the page you want to add your snippet to.

Or click on Add Page to add a new page.

Once you have selected (or added) a page, click on the close button (X) to close the Site Menu menu.

Your page will then be displayed in the editor, ready to be decorated with your widget.

Click on + Add Elements to add an element to your page.

Click on Embed Code.

Under Custom, select Popular Embeds -> Embed HTML.

The Embed HTML element will then be placed on the page.

On the HTML Settings dialogue, make sure the Website Address option is selected.

Insert the prepared snippet (as described above) in the text box under What’s the website address? and click on Apply.

Click on the close button (X) to close the HTML Settings dialogue box.

You can use any of the drag handles to resize the widget display area if required. Try and resize your widget so that no scrollbars are visible. If you make the size of your widget too small the social media icons won’t be displayed properly.

You can also move the widget area around in the selected area.

Resizing, placement and alignment can also be done via your Editor Toolbar (located on the right-hand side). To use the Toolbar, make sure it is enabled under Tools.

Click on Publish to publish your changes to your website. You could also use the Preview option to view the result before you Publish.

Your page should look like something similar to this.

The above applies to the Grid widget. For the SlideShow widget the process is exactly the same but here are some pics to show what it looks like.

If you click on any of the images in your widget (Grid or SlideShow), the Photo Popup will then be displayed as follows.

The Photo Popup is always displayed on your main display. If you have only one screen or if you are working on your main screen (in a multiple-display setup) it is displayed over your WIX webpage.