Overview
The Live Chat section in Settings lets you create and manage chat widgets for your websites. Add live chat to any site to let visitors contact you directly without needing WhatsApp, Instagram, or email. All conversations flow into your Spur shared inbox.
Live Chat Channels
The main page shows all your live chat channels in a table:
Website: The name you gave each channel
Created At: When the channel was set up
Actions: View button to access channel settings
Click Create Channel to add a new live chat widget for another website.
Creating a New Live Chat Channel
Step 1: Basic Setup
Give a Website Name: Enter a descriptive name (e.g., "My Shopify Store")
Website URL: Add your site URL (e.g., https://example.com)
Then click on Create Channel.
Step 2: Configure Your Widget
Once created, click View to access the channel settings with four main tabs:
Chat Interface Tab
Identity Section:
Website Name: Appears in chat widget header and notifications
Display Name: Your team's name shown to visitors (e.g., "Support Team")
Logo Image: Upload JPG or PNG for branding
Message Placeholder: Text shown in message input box
Welcome Message: First message visitors see when opening chat
Appearance Section:
Brand Color: Choose your main widget color
Smart Color System: Automatically generates harmonious colors for text and backgrounds
Position: Choose Bottom Left or Bottom Right corner placement
Social Links Section:
WhatsApp: Toggle on and add your number with country code (+91, +44, etc.)
Instagram: Toggle on and add your username (without @ symbol)
Configure Collect Leads:
Toggle: Enable to prompt visitors for contact details
Fields to Collect: Choose Name, Email, and/or Phone requirements
Purpose: Captures lead information before chat starts
Quick Questions:
Add suggested questions visitors can click to send instantly
Appear as clickable buttons in the widget
Examples: "Tell me about your best sellers", "What are your hours?"
Live Preview
The right side shows a real-time preview of how your widget will appear to visitors:
Home tab: Shows the initial widget state
Chat tab: Shows the conversation interface
Updates automatically as you make changes
Embed Tab
This is where you find the snippet of code that helps you actually deploy the chat widget on your website. You can put this line of code in your website's HTML and the live chat widget will instantly show up on your website for customers to talk to you through.
Step 1: Copy the Script Tag
Copy the provided embed code using the "Copy" button
Step 2: Add to Your Website
Paste the script into your website's HTML just before the closing
</body>tag
For Shopify Stores:
Go to admin.shopify.com
Navigate to Online Store > Themes
Click three dots next to current theme > Edit Code
Open theme.liquid file
Press Ctrl+F (Windows) or Cmd+F (Mac)
Search for
/bodyto find the</body>tagCreate a new line above
</body>Paste the Spur script code
Save the file
Step 3: Test Your Integration After embedding, verify:
Chat button appears in bottom corner
Widget loads automatically on page load
Visitors can start conversations instantly
Share Tab
Share Widget Preview
The Share tab lets you create a live preview link to test and demonstrate your chat widget before embedding it on your website.
Widget Preview URL:
Shows a unique preview link for your widget
Copy the URL using the copy button
Share this link with anyone to preview the widget
Preview Actions:
Open Preview: Opens the widget preview in a new tab
Copy Link: Copies the preview URL to share with others
How to Use This Preview:
Share with your team: Send this link to stakeholders to get approval on the widget design and messaging before going live.
Test functionality: Use this preview to test the chat flow and ensure everything works as expected without affecting your live website.
Preview changes: Any changes you make to widget settings are reflected in this preview instantly, letting you see updates before deployment.
Live Preview Features: This preview includes all your current widget settings:
Custom colors and branding
Welcome message and placeholder text
Widget position and styling
Suggested questions (if enabled)
Lead collection forms (if enabled)
The preview shows exactly how your widget will look and behave on your actual website, making it perfect for testing and getting team approval before embedding the code.
Settings Tab
Security Section:
Allowed Domains: Specify which domains can use this widget
Leave empty: To allow all domains
Add specific domains: For security (e.g., mysite.com, app.mysite.com)
Danger Zone:
Delete Channel: Permanently removes the chat channel and all settings
Warning: This action cannot be undone
Managing Multiple Channels
You can create separate live chat channels for:
Different websites
Different brands
Different departments
Testing vs production environments
Each channel has its own:
Unique embed code
Custom branding and messages
Independent settings
Separate conversation tracking
Best Practices
Widget Customization:
Use your brand colors for consistency
Keep welcome messages friendly and helpful
Add quick questions for common inquiries
Lead Collection:
Only request essential information
Explain why you need contact details
Keep forms short to avoid abandonment
Positioning:
Bottom right is standard for most cultures
Bottom left works for right-to-left languages
Test both positions to see what works for your audience
Social Integration:
Add WhatsApp for mobile users
Include Instagram for younger demographics
Ensure phone numbers include country codes
All live chat conversations appear in your Spur inbox alongside WhatsApp, Instagram, and Facebook messages for unified customer support management. You can use the Live Chat channel filter to only see Live Chats though.