How to integrate Yotpo & Shopify?

Yotpo is an official Shopify partner with over a thousand reviews in the Shopify app store. By connecting Yotpo to your Shopify store, it’s not only possible to facilitate customer reviews, but also carry out visual marketing, loyalty programs, and referrals to increase conversion, drive traffic, and build trust.

For example, our customer’s website uses Yotpo for reviews. When someone leaves a product review on the website, they are sent a verification email by Yotpo. These emails sent by Yotpo for verifying product reviews, redirect users to a Yotpo landing page. This hampers the user experience and results in users not verifying their reviews.

Grazitti resolved this challenge by doing the following:

• Contacted Yotpo’s Support team to provide us with a customized landing page URL. We then created a script through Javascript which reads the parameters in the URL and populates the content on the page accordingly in iFrame.
• For example, suppose the link that they provided was https://www.google.com/abc. The link came with dynamic parameters and looked like this –
• http://google.com/abc?appkey=TqxMFOvoslSm4567657gfdC0EUyyuuYCAJuGRx&page_url=https%3A%2F%2Flanding-pages.yotpo.com%2Freview&review_accept_one_field=true&review_images=true&
  review_title_required=true
  
• For the query parameters, the encoded page URL parameter is https%3A%2F%2Flanding-pages.yotpo.com%2Freview
• The iFrame URL must then include the decoded page_url parameter first, and all additional parameters afterwards, and should look like this:

<iframe src=”https://landing-pages.yotpo.com/review&appkey=TqxMFOvoslSm4567657gfdC0EUyyuuYCAJuGRx&
review_accept_one_field=true&review_images=true&review_title_required=true></iframe>

Here is how you can implement it –

1. From your Shopify Admin go to the Online Store

2. Then click on ‘Pages’ on the left side

3. Now click on ‘Add Page’

4. In the content section, click on Show HTML

5. Copy and paste following code

div#targetDiv {margin: auto;text-align: center;}
.feature_divider, h1 { display: none;}
.store-logo{display:none;}iframe {  min-width: 320px;  }
@media screen and (max-width:420px) {
p.ng-binding.ng-scope {line-height: 27px;}
p.ng-binding {line-height: 27px;}
}

/* Use default jquery file, if required */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
function $_GET(param) {
	var vars = {};
	window.location.href.replace( location.hash, '' ).replace( 
		/[?&]+([^=&]+)=?([^&]*)?/gi, // regexp
		function( m, key, value ) { // callback
			vars[key] = value !== undefined ? value : '';
		}
	);
	if ( param ) {
		return vars[param] ? vars[param] : null;	
	}
	return vars;
}
var page_url = $_GET('page_url');//
var deco_var = decodeURIComponent(page_url );
var getParams = function (url) {
	var params = {};
	var parser = document.createElement('a');
	parser.href = url;
	var query = parser.search.substring(1);
	var vars = query.split('&');
	for (var i = 0; i < vars.length; i++) {
		var pair = vars[i].split('=');
		params[pair[0]] = decodeURIComponent(pair[1]);
	}
	return params;
};
var current_url_array = [];
current_url_array = getParams(window.location.href);
var newPathname = "";
   $.each(current_url_array, function (key, val) {
	  if(key == 'page_url'){
		return true;	
	 }	
	newPathname += key+"="+val;
	newPathname += "&";
    });

if(deco_var .includes('?')){
var new_parameter_url = deco_var +"&"+ newPathname;
} else {
var new_parameter_url = deco_var +"?"+ newPathname;
}
 var lastChar = new_parameter_url .slice(-1);
 if (lastChar == '&') {
  strVal = new_parameter_url .slice(0, -1);
  }  
function addIframe() {
var target = document.getElementById("targetDiv");
var makeIframe = document.createElement("iframe");
makeIframe.setAttribute("src", strVal );
makeIframe.setAttribute("scrolling", "no");
makeIframe.style.height = "430px";
makeIframe.style.width = "100%";
makeIframe.style.border = "none";
target.appendChild(makeIframe);
}

<div id="targetDiv"></div>
<script type="text/javascript">
// <![CDATA[
addIframe();
// ]]>
</script>

6. Click on ‘Save’ and you’re done!

Please note that the parameters shown here will not necessarily apply for your account and may vary according to the email type and other features in use.