Skip to main content

How to setup embedded Instagram posts to your site

Introduction​

Hello there! We understand that as a brand, your main goal is to provide the best experience for your customers. Along the way, you've gathered a lot of loyal customers. This feature we're about to explain is designed to help you give your customers a social proof, by showcasing Instagram posts from your most loyal customers.

These posts could be about your product reviews, your past marketing campaigns, and of course, your customer testimonials on how wonderful your products and services are!

With this feature, you can embed it into your loyalty page, and anywhere else you'd like! By showing testimonials and social proof, you'll see a significant decrease in bounce rates and a boost in your conversion rates.

How does the Instagram embedded content work?​

The Instagram embedded blocks work by presenting Instagram iframes - which are essentially snippets of Instagram posts that can be embedded into your website - in a mobile-first user experience. This makes your store a more trustworthy place to purchase.

Please note that you might need to manually add Instagram posts to this block. This block only works with public Instagram posts (posts from public Instagram users).

Generate your Loyalty page​

Step 1: Please navigate to Embedded Content on your left menu, then click on Generate Loyalty Page.

Step 2: A blank Loyalty Page will be generated. Please click on Apps.

Step 3: Now, please head back to your Joy Loyalty Program to setup your Instagram posts.

How can I add an Instagram block in Joy Loyalty?​

Step 1: Please navigate to Embedded Content > Instagram embedded content > Add Instagram posts. In the Instagram UGC section, click on Add new UGC.

Step 2: Here, you can add your content title (for managing only - it won’t show in front end) and your Instagram iframe. This is where you paste the code from the Instagram post you want to embed.

Where can I get Instagram iframe (or embedded code)?​

Step 1: Get your Instagram post embedded code​

For every public Instagram post, you may find there is a button to get its code, and then embed it into your website.

Step 2: Copy your embed code:​

Click on Copy Embed Code. The code will look like this:

<blockquote class="instagram-media" data-instgrm-
permalink="https://www.instagram.com/p/C1C3cGaPzG_/?utm_source=ig_embed…</blockquote>
<script async src="//www.instagram.com/embed.js"></script>

You can choose to include or not to include the caption of the post.

Step 3: Paste it into your block​

You can preview your embedded Instagram post in your store by clicking on the “View your store” button on the top right corner of your screen!

And that’s it!

Overall​

We hope this guide has been helpful in showing you how to use the Instagram embedding feature. By incorporating social proof into your store, you're not just enhancing the user experience, but also building a more trustworthy relationship with your customers. So go ahead, start embedding those Instagram posts and watch your conversion rates soar!