Install in SHOPLINE

Add a chat plugin in FIRST LINE

Through the left menu, add a plugin under “Channels” ⇒ “Live Chat”, and sequentially set the related information such as banner title, short introduction, etc.

Note here that for the “Allowed Domains” setting, please enter your store domain from SHOPLINE, e.g. xxxx.shopline.com.

After configuration and addition are complete, copy the code on the “Embed Code” page; you will paste it into SHOPLINE later to embed the live chat.

Paste the code into SHOPLINE

Log in to the SHOPLINE admin page

Go to https://sso.shoplineapp.com/users/sign_in page, and sign in to your store admin.

Paste the GTM code

Click the left “Store Marketing & Tracking” ⇒ “Tracking Settings”, then click the “Google Tag Manager” button and paste the GTM code. You can also refer to the official SHOPLINE documentation at the same time. https://blog.shopline.tw/how-to-use-gtm/ .

Add the code in GTM

Go to Google Tag Manager (GTM) and click “New Tag”.

After entering the Tag name, click the pencil icon in “Tag Configuration” to set the related settings.

Choose type “Custom HTML”, and for the trigger choose “All Pages”.

Next you need to copy and paste the FIRST LINE embed code into the HTML input box. Because GTM validates HTML standards, you must adjust the embed code to comply with the rules. The steps are as follows:

  1. Remove <iframe-app></iframe-app> paragraph.

  2. On the <div id="firstline-livechat-app"></div> Then append the following code after it: <script> (function() { var wrapper = document.getElementById('firstline-livechat-app'); var el = document.createElement('iframe-app'); wrapper.appendChild(el); })(); </script>

The final actual embedded code example will look similar to the following:

Finally, press the “Submit” button, enter the version name, description and other information in order, and then press “Publish”.

Save — done!

You can now click the preview window to open your store and start communicating with customers using live chat!

Last updated