Adding your Instagram widget to your MemberVault 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.
Please note!
You can also make use of Shoppable items in your Instagram feed.
What do we mean by Shoppable?
Shoppable items in your widget allows your customer to go directly to page where they can shop the item/product marked as Shoppable. This makes it so much easier for your customer and should increase your sales if applied properly.
Follow these instructions to create Shoppable items.
About MemberVault
Part of the Content option is adding/creating pages. For the purpose of this tutorial we assume you have already created some pages so we will only go through the editing option to display our Snapwidget widgets. We will discuss the Grid and the Slideshow display. As we go along, we will explain the differences. For this purpose we have created 2 pages to allow us to add our snippet.
Please note that your snippet can also be added to the Welcome Area (part of the Page header). This can be collapsed by clicking on the arrow at the bottom of the Welcome Area. The process of adding your snippet is the same as for pages.
Please Note: Although the Editor allows you to add custom HTML, it strips any reference to external CSS files. This means that the line in your snippet containing the link to the snapwidget-lightbox.css file is removed, i.e. <link rel="stylesheet" href="https://snapwidget.com/stylesheets/snapwidget-lightbox.css" />
Luckily, MemberVault allows us to add Custom CSS. You can add Custom CSS as a site wide option by adding it under General Settings or per page. The General Settings option will then apply to all pages or areas where your snippet is added. If you choose to add it per page, you will have the option during the Page edit process. This will then only be applicable to the page where the Custom CSS is added.
For the purpose of this tutorial we will add it as a site wide option.
To add Custom CSS, select General under Settings on your dashboard.
On the General Settings page scroll down and click on Advanced Settings.
Add the link to the external CSS file to the Custom CSS text box using the CSS @import url command, i.e.
@import url('https://snapwidget.com/stylesheets/snapwidget-lightbox.css');
Please note the semi-colon at the end.
When done, scroll down and click on Save.
A. The Grid Display
On your dashboard, under Content, click on Pages and click on the Edit action for the page you want to add your widget to.
The editor opens up and displays your page in edit mode allowing you to add your snippet or any other text.
To add HTML code you must select the Source Code <> option on the Page Content toolbar. This will then display the Source Code editor.
Insert your snippet and click on Save.
The Page editor will then display the result as a ‘preview’.
To see what we meant regarding the stripping of the CSS external file link code, re-open the Source Code editor. Note the <p> tags that were included.
Exit the Source Code editor and click on Save on the Page editor page.
Your page will now be displayed as follows (the widget covers the full available width of your page).
You can change the width of the widget by changing the iframe width setting in the snippet, e.g. 75%.
This will then reduce the width of the widget and display left-justified.
To allow you to center-justify your widget we will make some modifications to your snippet code. This will not change the code on your SnapWidget account, it is only applicable for this instance.
Add a <div> block encapsulating the iframe code. The “width: 75%; margin: auto” setting of the <div> style will set the width of the <div> block to 75% and centered on the page. With this setting we will leave the iframe width set to 100%. This will set the width of the iframe to 100% of the width of the <div> block.
Please note - if you make the width too small then you won’t be able to click on an item in the grid and your social media buttons will also not be displayed properly.
Your widget will then be displayed as follows on your website and the Lightbox display also works.
B. The Slideshow Display
As mentioned above, the process for adding your snippet is the same for both widget types.
The standard responsive Slideshow widget contains the following snippet.
On your page it will be displayed as follows.
The widget will be displayed left-justified. The width of the responsive Slideshow widget as well as the justification cannot be changed.
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.
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.
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:
Make the following changes to the snippet.
Add 2 <div> blocks with the following styles (the ids are just for explanatory purposes for this tutorial, they are not used for any other purpose so you actually leave them out).
<div id=”Wrapper” style=”width: 30%; margin: 0 auto;”> (this sets the Wrapper to 30% of available width and center-justified. With this width setting we can change the width of the widget to any width we want).
Please Note - As with the Grid display, 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.
<div id="Container" style="top: 0; height: 0; width: 100%; padding-bottom: 100%; overflow: hidden; position: relative; margin: 0 auto;"> (this sets the area used to display the iframe to 100% of the Wrapper width as well as height = 100% of the width).
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;).
With a ‘wrapper’ width setting at 30% your widget will then be displayed as follows and the Lightbox display also works.
The widget will also be responsive.