On your Studio dashboard, hover over the project you want to add your widget to and select Design Editor.

Your project will now be opened in edit mode with the default page displayed.

You can select a different page from the Pages option on the left sidebar.

In Studio we add the SnapWidget snippet via an Embed Box (this is applicable to the Grid Display as well as the SlideShow Display). Select the Layers option on the left sidebar.

This will open the main Design dialogue. Select the Add tab and then the Box option on the left sidebar.

Drag the Embed Blank </> box onto your web page where you want to display your widget. This will allow you to add your own custom code to your web page.

Select the newly added Embed Box, open the panel on the right side and insert your snippet under </> Custom.

You will notice that your snippet will now be displayed in the Embed Box. The displayed size depends on the size of the Embed Box. You can resize the displayed area by dragging the corners of the Box to the required size. Always keep in mind that if you make it too small it won’t display the social media button icons properly on the images. In our case it started out very small. If we resize it, we can display it as follows:

If you click on any image in the Grid display (we will see this later in the SlideShow display as well) then the default setup of SnapWidget will display the selected image in a Lightbox. Please note that Studio will display the selected image in a Lightbox inside the available area you setup for the widget (as displayed above). If you make it big enough, it will display more or less correct but this could be impractical.

We suggest that you rather select the Photo Popup photo link for displaying your image. This you choose on your SnapWidget dashboard when you set up your widget.

Your image will then be displayed as a popup on top of your web page.

The standard responsive Slideshow widget contains the following snippet.

If you add your standard responsive Slideshow snippet to your page, it will be displayed as follows.

The widget displays left-justified. The width of the responsive Slideshow widget as well as the justification cannot be changed. The greyish area you see around your widget is the actual Embed Box you added to your web page. We will have to fill the Embed Box area with your widget. To enable us to change the width (and height to keep it at a 1:1 ratio) we have to make some changes to our widget (this only applies to this instance of the widget and does not affect the settings of your widget as selected on your SnapWidget dashboard).

Create a non-responsive Slideshow widget on your Snapwidget dashboard. The iframe width and height is not important, you can set them to 200px each to start out with (just keep them the same).

We are now going to add some HTML and CSS code to our snippet to create an area where the snippet will be displayed. The area will be basically as follows:

This gives us control over the width, height and the justification of the widget. It also causes the non-responsive widget to become responsive.

The standard non-responsive Slideshow widget contains the following:

Add a <div> block with the following styles (the id is just for explanatory purposes for this tutorial, they are not used for any other purpose so you actually leave them out).

Remove the width and height attributes of the style part of the iframe and replace them with the indicated attributes (left: 0; width: 100%; height: 100%; position: absolute;).

This will then display the widget as follows. As with the Grid Display you can then resize the displayed area by dragging the corners of the Box to the required size. Always keep in mind that if you make it too small it won’t display the social media button icons properly on the images.