Spur's latest update introduces the ability to integrate a live chat feature directly onto your website. This allows people to talk to you from your website without needing to use separate platforms like WhatsApp, Instagram, or email.
This article will tell you how you can integrate this live chat on your website.
Prefer to watch? Here's a video telling you pretty much the same thing: https://youtu.be/T5CI505vrYo
Note: While this guide uses a Shopify store as an example, the steps are applicable to any website.
Step 1: Create a Live Chat Channel in Spur
First, you need to create the live chat channel within your Spur settings.
Navigate to settings.
Go to Live Chat.
Click on the option to create a channel.
Add a website name for your channel, such as "My Shopify store")
Enter your website URL (e.g., example.com).
Click on create channel.
This will create a new entry for your channel. Click on view next to the channel you just created to proceed.
Step 2: Configure Your Live Chat Widget
The screen you see after clicking "view" allows you to edit and configure your live chat widget to your liking.
You can change the color of the widget.
You can add your website name or customize the support name, for example, "my Shopify store support".
You can add a logo by uploading an image.
Customize the message placeholder, which is the text shown where users type their message (e.g., "type your message").
Set the welcome message, such as "how can I help you today".
You can also add quick questions. These appear as selectable options in the widget preview (like a "pill") that users can tap to send a predefined question, such as "tell me about your best sellers".
Additionally, you can show your social links:
Enable WhatsApp and enter your WhatsApp number, including the country code (e.g., +91 for India, +44 for the UK). This gives people the option to chat with you on WhatsApp.
Enable Instagram and enter your Instagram username. People will be taken to that platform.
After making any changes to the live chat widget settings within Spur, make sure to hit "Save Changes" on the top-right.
Step 3: Embed the Widget onto Your Website
To make the widget live on your website, you need to embed a script tag provided by Spur.
Go to the embed tab within your channel settings.
Copy the code at the very top using the "copy code" button.
Step 4: Deploy the Script on Your Shopify Store
Now, you need to paste the copied script into your website's code. For a Shopify store, the steps are as follows.
Go to your Shopify admin page (admin.shopify.com).
Navigate to online store on the left-hand side.
Click on the three dots next to your current theme.
Select edit code. This opens the theme code editor.
Click on
theme.liquidfrom the files listed. Ensure you are editing onlytheme.liquid, and nothing else.Click anywhere within the code editor (you don't need to understand the code).
Press Ctrl F (on Windows) or Command F (on Mac) to open the search bar.
Type
/body(using the forward slash) into the search bar and hit "Next"
You are looking for the</body>tag. There should ideally be only one instance of this. If there are multiple, scroll to the very last one at the end of the code.Go to the line immediately before the
</body>tag and press enter to create a new line.Paste the script you copied from Spur onto this new line. You can paste it as plain text or normally.
Once the code is pasted, hit save on the top-right.
That's it! Your live chat widget should now be live on your website.
While the steps for navigating your website's code may differ for non-Shopify sites, the general principle remains the same: copy the script tag from Spur and paste it into your website's main theme file, typically just before the closing </body> tag.
After completing these steps, the chat widget will appear on your website, allowing visitors to click on it and start a conversation.