Quickstart

To get started with ShopMessage, install your site-specific snippet on your page and start triggering events!

📘
Supported Browsers
The ShopMessage SDK only supports the latest two stable versions of the most popular browsers: Chrome, Firefox, Edge, Safari (including iOS), and Internet Explorer (version 11 only).

Basic Setup

If you are a Shopify Merchant, just signup and choose "Shopify" from the platform selection when prompted. You will need to grant permission for ShopMessage to access your store, then the app will setup and initialize the SDK for you!

For non-Shopify Merchants, the app will ask you to install a JavaScript snippet on your page just above the trailing </head> tag. Your snippet will look similar to the example below, but the site hash (sometimes called public hash) is unique to your site! Don't worry, our SDK loads asynchronously and will not interrupt load time of your site.

<script type="text/javascript">
// replace this string with your site's public hash
var shopmsg_site_hash = "{YOUR_SITE_HASH_HERE}";
window.lightningjs||function(s){var w="lightningjs";function e(e,t){var r,v,g,n,a,i;return t&&(t+=(/\?/.test(t)?"&":"?")+"lv=1"),s[e]||(r=window,v=document,g=e,n=v.location.protocol,a="load",i=0,function(){s[g]=function(){var e=arguments,t=this,d=++i,n=t&&t!=r&&t.id||0;function o(){return o.id=d,s[g].apply(o,arguments)}return(f.s=f.s||[]).push([d,n,e]),o.then=function(e,t,n){var r=f.fh[d]=f.fh[d]||[],a=f.eh[d]=f.eh[d]||[],i=f.ph[d]=f.ph[d]||[];return e&&r.push(e),t&&a.push(t),n&&i.push(n),o},o};var f=s[g]._={};function e(){f.P(a),f.w=1,s[g]("_load")}f.fh={},f.eh={},f.ph={},f.l=t?t.replace(/^\/\//,("https:"==n?n:"http:")+"//"):t,f.p={0:+new Date},f.P=function(e){f.p[e]=new Date-f.p[0]},f.w&&e(),r.addEventListener?r.addEventListener(a,e,!1):r.attachEvent("on"+a,e);var m=function(){function t(){return["<head></head><",e,' onload="var d=',h,";d.getElementsByTagName('head')[0].",a,"(d.",i,"('script')).",d,"='",f.l,"'\"></",e,">"].join("")}var e="body",n=v[e];if(!n)return setTimeout(m,100);f.P(1);var r,a="appendChild",i="createElement",d="src",o=v[i]("div"),s=o[a](v[i]("div")),c=v[i]("iframe"),h="document",p="domain",l="contentWindow";o.style.display="none",n.insertBefore(o,n.firstChild).id=w+"-"+g,c.frameBorder="0",c.id=w+"-frame-"+g,/MSIE[ ]+6/.test(navigator.userAgent)&&(c[d]="javascript:false"),c.allowTransparency="true",s[a](c);try{c[l][h].open()}catch(e){f[p]=v[p],r="javascript:var d="+h+".open();d.domain='"+v.domain+"';",c[d]=r+"void(0);"}try{var u=c[l][h];u.write(t()),u.close()}catch(e){c[d]=r+'d.write("'+t().replace(/"/g,String.fromCharCode(92)+'"')+'");d.close();'}f.P(2)};f.l&&m()}()),s[e].lv="1",s[e]}var t=window[w]=e(w);t.require=e,t.modules=s}({}),window._shopmsg=lightningjs.require("_shopmsg","https://cdn.shopmsg.me/v1.0/shopmsg_sdk.js"),function(e,t,n){var r,a=e.getElementsByTagName(t)[0];e.getElementById(n)||((r=e.createElement(t)).id=n,r.src="https://cdn.shopmsg.me/platform/"+shopmsg_site_hash+"/v1.0/initialize.js",a.parentNode.insertBefore(r,a))}(document,"script","shopmsg-jssdk");
</script>

Triggering Events

After you've placed the snippet, the _shopmsg object will be immediately available for you to invoke. The most common activity you can do with the SDK is trigger events. For example, here is how to trigger a ViewProduct event:

_shopmsg('trigger', 'ViewProduct', {
  "product_id": 8257325317,
  "title": "Blue Shirt",
  "product_url": "https://bklyn-demo.myshopify.com/collections/mens/products/ayers-chambray",
  "vendor": "United By Blue",
  "product_type": "Mens",
  "product_tags": [
    "Shirts"
  ],
  "image": "https://cdn.shopify.com/s/files/1/2123/3399/products/chambray_5f232530-4331-492a-872c-81c225d6bafd.jpg?v=1498247863"
});