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 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.
To post an Instagram feed, it is necessary that you have connected Google Tag Manager (GTM) (this is available from a Mijnwebwinkel PRO subscription). If you have not yet done so, read via the links below how to create a Google Tag Manager account and how you can link it in the management environment of your webshop. Do this before continuing with SnapWidget.
A. How do I integrate Google Tag Manager?
With Google Tag Manager you place HTML tags on your website, e.g. to integrate a live chat. Google already has a number of frequently used tags ready for you, so you can place them in your shop in no time.
For displaying your SnapWidget widget on your store page(s) you will have to create custom tags. How to link GTM to your store is explained below. We will then show you how to create the tags you need (it will need some technical knowledge from your side, but if you follow what we show you, it shouldn’t be too difficult.
Please note!
Tags that you apply will influence the way your web store works. It is therefore important that you regularly check the functioning of your shop and order process.
Furthermore, please note that our support team does not offer support in creating tags.
Now it's time to get started with Google Tag Manager.
1. Create a Google Tag Manager account
Go to Google Tag Manager and sign in with your Google account. Start with creating an account and a container. This container is what you will later link to your shop and contains all your tags. Fill in the following information:
Under Account Setup, fill in your Account Name. Use the name of your company or shop (this is mandatory).
Select your Country if necessary.
You can select sharing your data with Google and others (see info regarding this in popup).
Under Container Setup, enter the shop domain name at Container name.
As the Target platform, select the Web option and click on Create.
The Google Tag Manager Terms of Service Agreement will now be displayed.
If you do agree to the terms stated therein, tick the checkbox at the bottom of the Service Agreement page.
Then click on Yes at the top of the page
A piece of code will now appear on the screen.
You don't have to place this in your web store, just leave that to us! That will be fully automated once you have completed this instruction ;-)
2. Linking your container
On your Mijnwebwinkel Dashboard, select Marketing on the left menu bar and click on Google services.
On the Google services page, open the Google Tag Manager tab. Click on the Connect with Google button to connect to your Google Account.
Google will display a Sign in with Google dialog box. Select the account you want to use to link to Google Tag Manager.
Note: You've probably done this before to connect to Analytics or the Search Console.
Next, turn on the Make use of the Google Tag Manager option and select your container. Is your container already selected? Then all you have to do is click on Save.
3. Adding tags
That wasn't too bad, was it? Time to start filling your container! Besides the ready-made tags that Google already has in there, you can also create your own HTML tags. This option is used for example for adding a live chat on every page of your store. Or for showing Google Maps on your contact page. For SnapWidget it will be used to display your widget on your Mijnwebwinkel store page(s).
Make sure you're logged into Google Tag Manager and select the container you've linked to your store.
Select the item Tags in the menu on the left.
Then click on New to create a new tag.
Give your tag a name and then click on the Tag Configuration block.
On the Choose tag type, choose Custom HTML under Custom.
Paste the code below into the HTML field.
<!-- SnapWidget -->
<script src="https://snapwidget.com/js/snapwidget.js"></script>
<script>
var iframe = '';
var elements = document.getElementsByTagName("p");
[].forEach.call(elements, function (element) {
if (element.textContent === "[instagram-feed]") {
var iframeDiv = document.createElement("div");
iframeDiv.innerHTML = iframe;
element.parentNode.replaceChild(iframeDiv, element);
}
});
</script>
Copy the snapwidget-lightbox.css line and the snapwidget-lightbox.js line from your SnapWidget snippet (see below marked red) and paste it after the 2nd line between the snapwidget.js line and the <script> line.
These lines must be used if you have a SnapWidget PRO subscription and you have set the Photo Link as a Lightbox. It also applies when you make use of the Shoppable item feature of your SnapWidget widget because to enable this you must set the Photo Link as Shoppable (Lightbox).
Please note - You cannot set up a Photo Link with the free SnapWidget.
What the Photo Link does:
If you click on a photo in a Slideshow or a Grid, the photo will be displayed in a larger size. With the free SnapWidget, the photo will be displayed on the SnapWidget website, but with the PRO plan, it will be displayed in a Lightbox with a link to the original photo on Instagram.
Next, copy the iframe code from your SnapWidget snippet (see below marked green) and paste this between the 2 apostrophes (' ') of the var iframe = ' ' on the 4th line.
If you have correctly added/modified the HTML content of the Google Tag Manager tag, it should look like this (the XXXXXX in the iframe src is your own SnapWidget ID for the specific widget).
Please note - SnapWidget allows you to create various widgets (e.g. grid, slideshow, etc.). To make use of this option, you must name the GTM tags accordingly (e.g. grid display and slideshow display instead of instagram feed). You then replace the [instagram feed] part of the if (element.textContent === "[instagram feed]") line with the correct name. This must be in square brackets.
When you have pasted all the code, click on Save at the top right of your screen.
A pop-up will appear stating that you have not selected a trigger yet. Click on Add Trigger.
Then select the All Pages option.
This will then display All Pages / Page View under Firing Triggers.
Click Save again at the top right of your screen to save your tag. Once your tag has been saved, click Submit in the top right corner of your screen and then Publish. Give your tag a name and description (if you want) and click Continue. You will now see the following screen:
After loading, your tag is published and you can place the Instagram feed in your webshop!
B. Place Instagram feed in your webshop
Finally, it is time to place your Instagram feed in your webshop.
Go to the management environment of your webshop. Go to the page where you want to place the Instagram feed. In the text of this page, paste the following code (the tag): [instagram feed] (or the name you gave as addressed before, for example [grid-display]).
Please note - Make sure the tag is not bold and use enter to insert the text (don't shift enter because then it won't work).
Then click Save at the bottom left.
Google Tag Manager will now automatically replace this piece of code with SnapWidget's Instagram feed!
And on your webshop it will look like this if you have used a Grid widget.
Or like this if you used a Slideshow widget.
If you have set the Photo Link as a Lightbox in your SnapWidget widget, you can click on one of the photos and it will be displayed as follows.
Please note - If you change the layout of the Instagram Feed after you have set it up in your webshop, the changes may not be implemented. This is because the Instagram feed is remembered in your cache. To see the Instagram Feed correctly, you have to empty your cache or view your webshop in the incognito mode of your browser.
C. Relink Instagram widget
It may happen that after some time you have to link the instagram widget again (re-auth) to your Instagram account. This is because the authorization has expired:
To fix this, log into your Snapwidget account, then click the box under "username" (see image below). Then follow the steps to pair again. Then click on UPDATE & GET WIDGET and you're done!
