In order for ICS to work with a checkout success page, a modification on the checkout creating a new success checkout module. See https://community.magento.com/t5/Magento-2-x-Programming/How-to-customize-Thank-you-page-in-Magento-2/td-p/73125# for detailed instructions. If you are not a skilled webmaster or developer, this will be extremely difficult. ICS integration is not recommended for someone who does not code at all. Because of the nature of Magento 2, modular override on the existing checkout success page is required.
1. When you build the success checkout module, make sure to have the following variables available by adding them to the Block file so that it can be retrieved by success.phtml file
- Customer email
- Order Id (unique identifier for the order)
- Order amount
- Customer name (optional but recommended)
- transactionId (related to payment information) (optional but recommended for ICS reward via refund feature)
2. In the success.phtml file, add the following script with "YOUR_PUBLIC_KEY" and "YOUR_CAMPAIGN_ID " replaced with the respective key/ID that's found in the integration section of your campaign within the Ice Cream Social admin page.
<script type="text/javascript">
var order_id = <?php echo json_encode($order_id); ?>;
var order_email = <?php echo json_encode($order_email); ?>;
var order_total = <?php echo json_encode($order_total); ?>;
var order_first_name = <?php echojson_encode($order_first_name);?>;
var order_last_name = <?php echo json_encode($order_last_name);?>;
var order_transactionid = <?php echo json_encode($order_transactionid);?>;
var ICSCookie = null;
var ICSCookieObject = null;
function getICSCookie() {
var allCookies = document.cookie;
var regex = /invite=([a-zA-Z0-9%]+)/;
var matches = allCookies.match(regex);
if (matches) {
ICSCookie = matches[0];
}
};
getICSCookie();
ICSCookieObject = Object.fromEntries(new URLSearchParams(ICSCookie));
(function(i,s,r,publicKey,campaignId,a,m,frame,bodyChild){
i['IceCreamSocialObject'] = r;
i[r] = i[r] || function(){ (i[r].q = i[r].q||[]).push(arguments) }, i[r].l =+ new Date();
a = s.createElement('script'), m = s.scripts[0];
a.async = a.src = 'https://dev.icecreamsocial.io/js/ics.js';
m.parentNode.insertBefore(a,m);
frame = s.createElement('iframe'), bodyChild = s.body.firstChild;
frame.src = 'https://dev.icecreamsocial.io/?campaignId='+campaignId+'&publicKey='+publicKey;
frame.id = 'SocialIframe', frame.style.cssText = 'position:fixed;height:0%;width:0%;z-index:9999;border:0';
bodyChild.parentNode.insertBefore(frame,bodyChild);
})(window,document,'ics','YOUR_PUBLIC_KEY', YOUR_CAMPAIGN_ID);
ics('addTransaction', {
orderId: order_id,
email: order_email,
revenue: order_total,
// the following items are optional
locale: 'en-US',
name: order_first_name + ' ' + order_last_name,
transactionId: order_transactionid,
});
</script>Once implemented correctly, you should be able to see the overlaid ICS widget once you have gone through the checkout process successfully.
3. To trigger a non-transaction based ICS script, use the following ICS standalone participation script to create influencers without needing users to go through a transaction.
<script type="text/javascript">
var order_id = <?php echo json_encode($order_id); ?>;
var order_email = <?php echo json_encode($order_email); ?>;
var order_total = <?php echo json_encode($order_total); ?>;
var order_first_name = <?php echojson_encode($order_first_name);?>;
var order_last_name = <?php echo json_encode($order_last_name);?>;
var order_transactionid = <?php echo json_encode($order_transactionid);?>;
var ICSCookie = null;
var ICSCookieObject = null;
function getICSCookie() {
var allCookies = document.cookie;
var regex = /invite=([a-zA-Z0-9%]+)/;
var matches = allCookies.match(regex);
if (matches) {
ICSCookie = matches[0];
}
};
getICSCookie();
ICSCookieObject = Object.fromEntries(new URLSearchParams(ICSCookie));
(function(i,s,r,publicKey,campaignId,a,m,frame,bodyChild){
i['IceCreamSocialObject'] = r;
i[r] = i[r] || function(){ (i[r].q = i[r].q||[]).push(arguments) }, i[r].l =+ new Date();
a = s.createElement('script'), m = s.scripts[0];
a.async = a.src = 'https://dev.icecreamsocial.io/js/ics.js';
m.parentNode.insertBefore(a,m);
frame = s.createElement('iframe'), bodyChild = s.body.firstChild;
frame.src = 'https://dev.icecreamsocial.io/?campaignId='+campaignId+'&publicKey='+publicKey;
frame.id = 'SocialIframe', frame.style.cssText = 'position:fixed;height:0%;width:0%;z-index:9999;border:0';
bodyChild.parentNode.insertBefore(frame,bodyChild);
})(window,document,'ics','YOUR_PUBLIC_KEY', YOUR_CAMPAIGN_ID);
ics(participation, {
getOrCreateInfluencer: true,
trackByInvite: true,
});
</script>4. Note that you can make the ICS widget appear as embedded as shown below by using the following format.
<div style="height: 500px;">
// Set parent <div> tag style. This will determine how ICS widget will display within your website. Minimum height of 500px recommended.
<div id="ICS">
<script>
document.getElementsByTagName("body")[0].style = "overflow: visible !important";
(function(i,s,r,publicKey,campaignId,a,m,frame,bodyChild){
i['IceCreamSocialObject'] = r;
i[r] = i[r] || function(){( i[r].q = i[r].q||[]).push(arguments)}, i[r].l = +new Date();
a = s.createElement('script'), m = s.scripts[0];
a.async = a.src = 'https://app.icecreamsocial.io/js/ics.js';
m.parentNode.insertBefore(a,m);
frame = s.createElement('iframe'), bodyChild = document.getElementById("ICS");
frame.src = 'https://app.icecreamsocial.io/?campaignId='+campaignId+'&publicKey='+publicKey;
frame.id='SocialIframe', frame.style.cssText = 'height:100%;width:100%;';
bodyChild.parentNode.insertBefore(frame,bodyChild);
})(window ,document ,'ics', 'YOUR_PUBLIC_KEY', YOUR_CAMPAIGN_ID);
ics(‘participation’, {
getOrCreateInfluencer: true,
trackByInvite: true,
});
</script>
</div>
</div>
5. For more detailed information on the ICS script please consult the ICS Quickstart Guide.