This tutorial shows how to add Instagram widget to your Showit website. It’s very easy and it only requires few steps.

Step by step instructions

This tutorial does not show how to create website on Showit platform. We assume that you already have a Showit website created. If you need some help with creating website on Showit we recommend checking Showit support page with getting started instructions.

Step 1 – login to your Showit account

Screenshot showing login screen on Showit website.

First you need to login to your Showit account. Use your e-mail and password to login to account that can edit your website.

Step 2 – create new blank canvas

Screenshot showing site canvases section on Showit website.

This step is optional but it keeps the website divided into organized sections. You can omit this step and add the widget to existing canvas.

In order to add new canvas make sure that Site tab is selected in the left menu. Click plus icon in Site Canvases section and click Add Blank Site Canvas link.

You can rename the section. In order to do so please click three dots button next to your new section and select Rename. We named our section “Instagram”.

Step 3 – configure mobile breakpoints in your widget

This step is also optional but we highly recommend it. Our widgets support different configurations on mobile and desktop devices. For instance you can change number of columns and rows on mobile to make pictures larger on smaller screens.

Please follow the instructions in this tutorial to learn how to configure your widget so it can have different configuration on mobile and tablet devices – How to change settings for mobile and tablet devices?

In our case our default (desktop) configuration of the widget has 1 row and 7 columns. On mobile the images would be very small, so we added a mobile breakpoint. max-width is set to 360px which seems to be optimal for mobile devices. On our mobile breakpoint we set the widget to be displayed as 2 columns and 2 rows.

The widget will look much nicer on mobile devices. It will also improve performance, since you will need to use only 1 widget, instead of two:)

Step 4 – add embed code element

Screenshot showing how to add Embed Code element to Showit canvas.

On the bottom of your screen you should see 3 icons that allows adding new elements. Please hover over the middle button and from the menu that will appear select Embed code.

Step 5 – paste your widget embed code

Screenshot showing edit code modal with widget embed code.

On your canvas you should see new block. Double click it and paste your widget embed code into the textarea and hit Save button. Alternatively select it first and from the right menu with properties select Embed Info and paste the code into Custom Code input.

If you don’t know where to find your widget embed code, please read this tutorial – where can I find my widget embed code?

Step 6 – resize Embed code elements

Screenshot showing example widget in preview mode.

Resize and position the widgets on mobile and desktop so they can be fully visible. You can add more elements like links or titles to make the section more interesting.

Step 7 – add canvas to your Showit page

Screenshot showing how to add Instagram canvas to given page.

Now you can add the canvas you created to any page that you want. In our case we will add the page to Home. Click three dots next to the page you would like to add the Instagram Canvas section. Click Add New Canvas. Select the Canvas you’ve created and click Add button.

Drag and drop canvas to the place you want. We added our widget above the Contact canvas.

That’s it! You have Instagram widget embedded on your Showit website!

Comments (0)

You must be logged in to post comments.