Adding your Instagram, Facebook or Twitter widget to your GoDaddy Website Builder website is easy. Follow these steps to create your widget.

Once you've created your widget, follow the appropriate steps below to add it to your website.

In this tutorial we will discuss the Grid and the Slideshow display. As we go along, we will explain the difference.

The GoDaddy Website Builder uses sections to place content on the website. For the purpose of adding your SnapWidget widget we are going to use the HTML section.

A. Start

a. Log in to your GoDaddy Website Builder account and on your Dashboard select the website you want to add your widget to and click on Edit Website.

b. While in edit mode, select the page you want to add your widget to.

c. If the page has no sections added yet, the editor will display your page as follows.

d. Click on the Add Section button to display the setup dialog for adding a new section to the page. On the displayed editor page, select HTML under Files & Web.

e. Click on Add to embed your custom code on the page.

f. You can change the Accent color and edit the theme colors.

g. You will see a red-colored warning message informing you that you should be confident working with HTML, CSS and JavaScript, but hey, that is what we are here for. If you stick to what we show you, you will be OK 😊.

h. Add a title in the Title input box and add your snippet in the Custom Code input box. As soon as you have entered the code it will be displayed as a preview on the editor page. You can also force the height of the widget if displaying it shows a too small area. The section editor also allows you to center the widget.

i. Clicking on the Preview button will display an exact preview of your webpage.

j. It will be displayed in desktop mode, but you can also display it in mobile mode showing the responsive capabilities of the section setup. To display the mobile mode, click on the mobile icon.

k. Click on Edit Site to return to the editor or on Publish to publish the site if you are satisfied with the changes you have made.

l. If you selected to publish your site, you will be shown the following dialog box to allow you to select the domain where you want to publish your website.

m. Click on View Site to view your live site.

n. Your widget will now be displayed on your live website.

o. The process for adding your SlideShow Display widget is exactly the same, but the way the widget will be displayed differs and we will go through those changes in the next parts of this tutorial.

B. Displaying your Grid Display widget.

a. If you added your standard responsive Grid widget your live webpage will be displayed as shown above - the widget uses 100% of the available space. If this is what you want to see, skip the next part of the tutorial, else read how we can change the way it is displayed. Note that the widget is responsive (will change size on smaller displays).

b. We can change the width of the displayed widget by changing the iframe width to e.g., 75%:

c. The widget will now be displayed at 75%. Please note that if you make the width too small, you will have difficulty to click on the item to display it in a lightbox. Your Social Media buttons will also not be displayed properly.

d. If you click on one of the images in the grid, it will be displayed in a lightbox.

C. Displaying your Slideshow Display widget.

In the above we worked with the Grid Display widget. Adding the Slideshow widget is the same procedure but the way the widget displays on the website differs (width, height as well as justification).

a. If you added your responsive Slideshow snippet to your page it will be displayed as follows:

b. The widget will be displayed left-justified. The width of the responsive Slideshow widget as well as the justification cannot be changed. As with the Grid display, if this is what you want just skip the next steps.

c. To enable us to change the width (and height to keep it at a 1:1 ratio) we will have to make some changes to our widget.

d. Create a non-responsive widget on your SnapWidget dashboard. The width and height are not important, you can set them to 200px each.

e. 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:

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

g. The standard non-responsive widget snippet contains the following:

h. Make the following changes to the snippet.

i. This will then display the widget as follows.

j. The widget is also responsive.