Shopify Tech Installation Guide

Modified on Thu, 16 May at 10:05 AM

Our Values 

Its important to note our value around integration as we understand our platform is part of a wider customer engagement strategy hence : 


“Confer With respects the investments our clients have already made in technology and aim to integrate seamlessly with platforms to enhance those investments. 

We are flexible enough to account for integrations and client needs. Confer With pro    ducts are light touch, secure and scalable.


Components

Confer With seamlessly integrates into Shopify, as its one of the main platforms we integrate to. Its quick and straightforward to deploy Confer With with several elements to configure :

Step 1 : The Widget / SDK

The core channel for customers to engage with you on Confer With is via your website and this requires either our widget and / or SDK to be deployed.  Either of these should be shown on any page where you would like to trigger a call from, generally this is your Home Page, Information Pages, Product Listing Pages or Product Pages so you can align the service to your customer journey. 


Widget Overview 

The widget is a simple and highly configurable tool for your customer to engage with you. It has several design flavours (Side Load, Bubble and Strip Load) and can integrate and trigger third-party plugins, such as chat or feedback widgets. You can use the Confer With widget as your unified widget.


The widget is a lightweight JavaScript widget that can be embedded in your website with a few lines of JavaScript or GTM. It prompts an intuitive CTA to direct the customer to either start a video call or schedule a virtual appointment.


The widget uses matching logic to route the customer to the most appropriate expert for either a walk-in or a virtual appointment, based on their behaviour, product and expert availability.


 


Deploying the Widget

This text explains how to deploy the Confer With Widget on your website. This widget enables your team to receive calls from your website visitors. You can use either a tag manager like Google or your theme page to do this. Please choose only one method and follow the steps below.


Method 1 : Using Google Tag Manager : 

  • Login to Google Tag Manager. Select the relevant account for your site. Note : If you’re not using google tag manager you can directly deploy the script liquid.theme just before the {% schema %} tag. 
  • Add a new Tag in the overview section and call and provide a name e.g. Confer With.
  • Select “Custom HTML” as the type.
  • Insert the following script
     <script src="https://live.conferwith.io/cdn/conferwith_widget.js"></script> 
  • Create a Trigger which determines where the widget will appear. Given that Confer With can work on any page, we recommend setting this on the Window Loaded Event or the Page View.
  • Save and Publish the Trigger.


More information can be found here : Deploying Widget


Method 2: Direct into your theme :

Please choose one of the options below (2.1 or 2.2), not both


Method 2.1 Deploy Confer With on product pages only
  • Login to Shopify as your admin and navigate to Online Stores -> Themes
    Before making any edits we recommend backing up your theme hence choose the option on the current theme of duplicate. This will create a copy below you can revert to if you have any issues. 
  • Choose Edit Code
  • Navigate to Sections
  • Edit Template -> Sections - > product-template-default.liquid (or equivalent)
  • Add the code to the right line just before {% schema %} tag ->
  • Save

{% unless product == empty %}

  <script type="application/json" id="ProductJson-{{section.id }}">

    { product | json }

  </script>

  <script type="application/json" id="ModelJson-{{section.id }}">

    {{ product.media | where: 'media_type', 'model' | json }}

  </script>

 <div id="root"></div>

<script src="https://live.conferwith.io/cdn/conferwith_widget.js"></script>

{% endunless %}

Method 2.2 To Deploy Confer With on All Pages 

  • Login to Shopify as your admin and navigate to Online Stores -> Themes
    Before making any edits we recommend backing up your theme hence choose the option on the current theme of duplicate. This will create a copy below you can revert to if you have any issues. 
  • Choose Edit Code
  • Edit Template -> theme.liquid
  • Add the code to the right line just before the last </body> tag
  • Save

<script src="https://live.conferwith.io/cdn/conferwith_widget.js"></script>


Step 2 : Product Feed Integration

To drive the immersive experience we integrate to read product information into the Confer With App which can be shared within the video call. To do this please create the App and provide the keys to Confer With after its created so we can apply to your Confer With tenant. 


Please follow the instructions below to configure this connection to Confer With 


  • Login to Shopify Admin
  • Navigate to Apps and Click “Apps” (note not Add Apps)
  • Click “App and Sales Channel Settings”
  • Choose “Develop Apps”
  • Select “CREATE AN APP”
  • Call the app “Confer With” and Create App
  • Click “Configure Admin API Scopes”
  • Grant read permissions to “Discounts, Price Rules and Products"

  • Click “Install App”
  • Capture “API Access Token” and share with Confer With.
    Note you only get one chance to capture this, if you don’t copy just restart the app creation


Step 3 : Checkout Integration

This is a script which allows Confer With to track a sale related to a Live Video call on the platform. We call this the Sales Tracking Script and its added into your checkout configuration, within Shopify, to trigger on a page where your customers are taken, post purchase


  • Login to Shopify as an administrator, or a user that has permission to configure the settings on Shopify. After this, you should be presented with your admin portal for your Shopify Site.

  • In the bottom left hand corner you will see a "Settings", please click this to be taken to the Shopify Settings area
  • Locate the option called "Checkout" and click this
  • Scroll down and towards the bottom of these settings you will see two sections - "Order Status Page" and "Post-Purchase Page". Both of these options should have the Confer With checkout script configured as below (Note : If there are already scripts in this section, please just add to the top of the list)

<script>var ecommerce = "shopify" </script>

<script src="https://live.conferwith.io/cdn/checkout.js"></script>


  • Finally click "Save" to apply your settings 


More information can be found here : Configuring Sales Tracking

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article