Shopify Integration Details

First, you need to install the Reamaze For Shopify app if you haven't yet done so already. (http://www.reamaze.com/apps/shopify)

If your Shopify store allows customer login and accounts, Reamaze can be integrated into your customer-facing website to deliver seamless customer support.


Integrating Reamaze JS for Shopify

Following the steps below will provide your Shopify storefront with both the Support Shoutbox and Authentication, giving your customers quick access to support (and conversation history if they’re logged in to your store).

To integrate, you'll just need a couple of snippets of HTML added to your Shopify template.

The following HTML fragments should be added in the <head> section of the theme.liquid file, before the {{ content_for_header }} line of your Shopify template:

{% assign popup_trigger = '#support-link,[href="/contact"]' %} 
{% assign kb_selector = '#reamaze-kb' %}

<script>
    var _support = _support || { 'ui': { 'trigger': '{{ popup_trigger }}', 'container': '{{ kb_selector }}' }, 'user': {} };
    _support['ui']['widget'] = true;

{% if shop.customer_accounts_enabled and customer.id %}
    // modify variables here
    {% assign sso_key = '$SSO_KEY' %}

   _support['user'] = {
         shop: '{{ shop.permanent_domain }}',
         id: '{{ customer.id }}',
         authkey: '{{ customer.id | append:':' | append:customer.email | append:':' | append:shop.permanent_domain | append:":" | append:sso_key | sha1 }}',
         email: '{{ customer.email }}',
         name: '{{ customer.name }}',
         data: {
             'Order count': '{{ customer.orders_count }}',
             'Total spent': '{{ customer.total_spent | money }}',
             'Recent order': '{% if customer.last_order.name %}{{ customer.last_order.name }} - {{ customer.last_order.created_at | date: "%B %d, %Y %I:%M%p" }}{% endif %}'
        }
    };
{% endif %}

</script>

$SSO_KEY should be replaced with your secret sso key (You can find this in the Settings -> Account IDs and Secret section in your Reamaze Admin).

You can also add more data attributes in the _support['user']['data'] section (Where the order count and total spent are currently being passed to Reamaze in this example above).


Removing Embed

If you've installed Reamaze through the Shopify App Store and wish to remove the Embed installed on your storefront in its entirety, simply open your theme.liquid file and add the following to your template:

<script>
var _support = _support || { 'ui': {}, 'user': {} };
_support['ui']['widget'] =  false;
</script>

If you would like to remove the Reamaze Embed from your "Thank You" / "Order Status" pages, go to Shopify Admin -> Settings -> Checkout -> Additional Scripts and add the script above into the text input area.

Additional Integration Notes

If you would like to CUSTOMIZE the Reamaze Shoutbox on your "Checkout" pages, you will need access to the "checkout.liquid" HTML template. Currently, only Shopify Plus members will have access to this. If you are a Shopify Plus member and have access to checkout.liquid, you may paste the Shoutbox script generated from the Embed Builder there.

You may also want to customize the Reamaze Shoutbox on your order status / Thank You pages. To do so, go to Shopify Admin -> Settings -> Checkout -> Additional Scripts and add the necessary Embed Script generated from the Embed Builder into the text input area.

In either the Checkout page or Order Status page, you will also need the following script added:

<script type="text/javascript" src="https://cdn.reamaze.com/assets/reamaze.js"></script>

Make sure to check out our developer documentation for optional integrations like the Support Lightbox and Embeddable Contact Forms.