Add Chat Widget to Custom Store

Elevate your customer service by integrating the Spur chat widget into your website. This allows visitors to engage with you directly through WhatsApp, Instagram, Messenger, or Email. Follow these general instructions to add the widget to your site.

Steps to add the widget on your website

Step 1 : Include the CSS
The first step is to link the Spur chat widget's CSS to your website for proper styling. Insert the following line in the <head> section of your website such that it is imported on every page.
```
<link rel="stylesheet" href="https://r2.spurnow.com/widget/chat-widget.css">
```
Step 2 : Include the JS
Next, include the Spur chat widget's JavaScript file and customize it by adding data attributes to the script tag. Make sure it is included correctly on every page you wish to see the widget.
```
<script 
id="spur-chat-script" 
type="module" 
src="https://r2.spurnow.com/widget/chat-widget.js" 
data-ig-username="your_instagram_username" 
data-fb-page-name="your_facebook_page_name" 
data-phone="your_whatsapp_number" 
data-email="your_contact_email"
>
</script>
```
Replace your_instagram_username, your_facebook_page_name, your_whatsapp_number, and your_contact_email with your actual Instagram username, Facebook page name, WhatsApp number, and contact email, respectively.
Step 3 : Add the Widget Container
For the JavaScript to work correctly add an empty div on your website with the id spur-chat-widget .
```
<div id="spur-chat-widget" style="z-index: 1000"></div>
```

Troubleshooting

If the widget does not appear or does not function correctly:

Confirm that the CSS and JavaScript links are correctly placed in the HTML document.
Verify that there are no typos in the URLs.
Check the browser console for any errors that may indicate conflicts or issues with the script.
Ensure there is no other CSS or JavaScript on your site that may be interfering with the widget.

Additional Customization Properties

After setting up the basic contact information, you can further customize the chat widget using the following properties:

data-email-enabled: Set to 'true' to enable email communication through the widget.
data-ig-messenger-enabled: Set to 'true' to allow Instagram Messenger as a chat option.
data-messenger-enabled: Set to 'true' to activate Facebook Messenger for customer interactions.
data-wa-enabled: Set to 'true' to enable WhatsApp messaging through the widget.
data-position: Choose 'right' or 'left' to position the widget on the screen.
data-primary-color: Define the primary color of the widget using a hex color code.
data-bottom-offset: Set the pixel value for the widget's distance from the bottom of the viewport.
data-icon: Select an icon for the widget, such as 'whatsapp' for a WhatsApp icon.
data-email-heading: Specify the subject for email communications initiated by the widget.
data-email-body: Define a pre-populated message for email communications.
data-whatsapp-body: Set a default message for WhatsApp chats.
data-chat-whatsapp-text: Customize the display text for the WhatsApp chat option.
data-chat-insta-text: Customize the display text for the Instagram chat option.
data-chat-messenger-text: Customize the display text for the Messenger chat option.
data-chat-email-text: Customize the display text for the email chat option.
data-greeting-title: Set a custom greeting title for the widget.
data-greeting-subtitle: Define a subtitle that usually indicates the expected response time.

How to Integrate WhatsApp, Facebook, Instagram, and Shopify with Spur: A Comprehensive Guide

How to enable/disable/edit Spur's Chat Widget on your Shopify Store

Integrate a custom ecommerce platform without a pre-built Spur integration

Integrate Spur on Your WooCommerce Store

Understanding Spur Pixel: Track Customer Journeys and Enhance Conversions