Skip to main content

SMS Web Chat Widget

Transform your website visitors into engaged leads with SendSquared's SMS Web Chat widget - a powerful tool that bridges the gap between web browsing and instant text messaging communication.

Overview​

The SMS Web Chat widget appears as an unobtrusive chat bubble on your website that, when clicked, opens a beautifully designed interface titled "We'll text you". This allows website visitors to instantly connect with your team via SMS without leaving your site or downloading any apps.

SMS Web Chat Widget

Why SMS Web Chat?
  • 95% open rate for SMS vs 20% for email
  • Instant engagement with prospects while they're actively browsing
  • Mobile-friendly communication that follows guests beyond your website
  • Compliant opt-in collection built into every interaction

Key Features​

Real-Time Guest Engagement​

  • Instant SMS connection with website visitors
  • Seamless transition from web browsing to text conversation
  • No app downloads or account creation required
  • Works on all devices and browsers

Smart Call Plans​

  • Different templates for business hours vs after-hours
  • Day-specific messaging strategies
  • Timezone-aware scheduling
  • Automatic routing to appropriate team members

Complete Customization​

  • Match your brand colors and style
  • Custom greeting messages
  • Position anywhere on your page
  • Multiple campaigns for different purposes

Compliance Built-In​

  • TCPA-compliant opt-in collection
  • Automated consent documentation
  • Clear disclosure of messaging terms
  • One-click opt-out handling

Getting Started​

Step 1: Access Chat Campaigns​

  1. Log into your SendSquared dashboard
  2. Navigate to Campaigns → Chat Campaigns
  3. Click "Add new SMS Chat Campaign"

SMS Chat Campaign List

Step 2: Configure Basic Settings​

SMS Chat Campaign Editor

Campaign Name​

Choose a descriptive name for internal reference (e.g., "Website - General Inquiries", "Booking Page - Support")

Phone Number Selection​

Select which phone number will send/receive messages:

  • Choose from your provisioned 10DLC numbers
  • Consider using different numbers for different campaigns
  • Ensure the number has appropriate messaging capacity

Widget Appearance​

  • Color: Select a color that complements your website (#F79D65 in example)
  • Position: Choose from:
    • bottom-left
    • bottom-right
    • top-left
    • top-right

Template Selection​

Choose from pre-built templates or create custom ones:

  • Template 1-10: Various styles and messaging approaches
  • Custom templates can be created in the Template editor

Step 3: Set Up Call Plans​

Call Plans allow you to display different messages and route to different teams based on time of day and day of week.

SMS Chat Call Plans

Business Hours Configuration​

Configure separate schedules for each day:

Sunday: 8:00 AM - 6:00 PM
Monday: 7:00 AM - 9:00 PM  
Tuesday: 7:00 AM - 9:00 PM
Wednesday: 7:00 AM - 9:00 PM
Thursday: 7:00 AM - 9:00 PM
Friday: 7:00 AM - 10:00 PM
Saturday: 8:00 AM - 10:00 PM

Template Assignment by Time​

For each time period, you can assign:

  • Different SMS templates: Vary your messaging approach
  • Routing values: Send to different team members
    • "Standard" - Regular support team
    • "After Hours" - On-call team
    • "VIP" - Specialized agents

Every Day Hours Override​

Set universal hours that apply to all days unless specifically overridden.

Step 4: Get Your Install Code​

Once configured, click "Get Install Code" to generate your unique JavaScript snippet:

<!-- Install this on the bottom of the page -->
<script src="https://api.sendsquared.com/tracking/v1/bse-analytics-es3.js"></script>
<script src="https://api.sendsquared.com/sms-chat/v1/s2-sms-chat.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', async function (event) {
    S2SmsChat.init(
      '59d8687e-a356-4dc9-b72c-161510e76a9c',
      'f1b146f7-7b52-4580-8d09-ec6dfd4809d6' 
    );
  });
</script>
<!-- End SendSquared SMS Chat Widget -->

Installation Guide​

Basic Installation​

For Standard Websites​

Add the code just before the closing </body> tag:

<!DOCTYPE html>
<html>
<head>
  <title>Your Website</title>
</head>
<body>
  <!-- Your website content -->
  
  <!-- Install this on the bottom of the page -->
  <script src="https://api.sendsquared.com/tracking/v1/bse-analytics-es3.js"></script>
  <script src="https://api.sendsquared.com/sms-chat/v1/s2-sms-chat.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', async function (event) {
      S2SmsChat.init(
        'YOUR-CAMPAIGN-ID',
        'YOUR-TEMPLATE-ID'
      );
    });
  </script>
  <!-- End SendSquared SMS Chat Widget -->
</body>
</html>

For WordPress​

  1. Using a Plugin (Recommended):

    • Install "Insert Headers and Footers" plugin
    • Go to Settings → Insert Headers and Footers
    • Paste the code in the "Scripts in Footer" section
    • Save changes

  2. Theme Editor Method:

    • Go to Appearance → Theme Editor
    • Select footer.php
    • Add code before </body> tag
    • Save changes

For Wix​

  1. Go to Settings → Custom Code
  2. Click "+ Add Custom Code"
  3. Paste the SendSquared code
  4. Set placement to "Body - End"
  5. Apply to "All Pages" or specific pages
  6. Save and publish

For Squarespace​

  1. Go to Settings → Advanced → Code Injection
  2. Paste code in the "Footer" section
  3. Save changes

Advanced Installation​

Conditional Loading​

Load the chat widget only on specific pages:

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Only load on specific pages
  const allowedPaths = ['/contact', '/properties', '/booking'];
  const currentPath = window.location.pathname;
  
  if (allowedPaths.some(path => currentPath.includes(path))) {
    // Load SendSquared scripts
    const script1 = document.createElement('script');
    script1.src = 'https://api.sendsquared.com/tracking/v1/bse-analytics-es3.js';
    document.body.appendChild(script1);
    
    script1.onload = function() {
      const script2 = document.createElement('script');
      script2.src = 'https://api.sendsquared.com/sms-chat/v1/s2-sms-chat.min.js';
      document.body.appendChild(script2);
      
      script2.onload = function() {
        S2SmsChat.init(
          'YOUR-CAMPAIGN-ID',
          'YOUR-TEMPLATE-ID'
        );
      };
    };
  }
});
</script>

Multiple Campaigns​

Run different campaigns on different pages:

<script>
document.addEventListener('DOMContentLoaded', async function() {
  const pathname = window.location.pathname;
  let campaignId = '';
  let templateId = '';
  
  // Booking pages - urgent support
  if (pathname.includes('/booking')) {
    campaignId = 'BOOKING-CAMPAIGN-ID';
    templateId = 'BOOKING-TEMPLATE-ID';
  }
  // Property pages - sales inquiries
  else if (pathname.includes('/properties')) {
    campaignId = 'SALES-CAMPAIGN-ID';
    templateId = 'SALES-TEMPLATE-ID';
  }
  // Default - general support
  else {
    campaignId = 'GENERAL-CAMPAIGN-ID';
    templateId = 'GENERAL-TEMPLATE-ID';
  }
  
  S2SmsChat.init(campaignId, templateId);
});
</script>

For Developers​

API Methods​

Initialize Chat​

S2SmsChat.init(campaignId, templateId);

Show/Hide Widget Programmatically​

// Show the widget
S2SmsChat.show();

// Hide the widget
S2SmsChat.hide();

// Toggle visibility
S2SmsChat.toggle();

Open Chat Window​

// Programmatically open the chat
S2SmsChat.open();

Destroy Instance​

// Remove the widget completely
S2SmsChat.destroy();

Event Handling​

Listen for chat events:

// Widget opened
window.addEventListener('s2-chat-opened', function(e) {
  console.log('Chat opened');
  // Track in analytics
  gtag('event', 'chat_opened', {
    'event_category': 'engagement'
  });
});

// Message sent
window.addEventListener('s2-chat-message-sent', function(e) {
  console.log('Message sent:', e.detail);
  // Track conversion
  fbq('track', 'Lead');
});

// Widget closed
window.addEventListener('s2-chat-closed', function(e) {
  console.log('Chat closed');
});

Custom Triggers​

Create custom buttons to open chat:

<!-- Custom button -->
<button onclick="S2SmsChat.open()">
  Text Us Now
</button>

<!-- Link trigger -->
<a href="#" onclick="S2SmsChat.open(); return false;">
  Have a question? Text us!
</a>

<!-- Floating action button -->
<div class="custom-chat-trigger" onclick="S2SmsChat.open()">
  <img src="sms-icon.svg" alt="Text Us">
</div>

Dynamic Configuration​

Adjust configuration based on user behavior:

// Show chat after user scrolls 50%
window.addEventListener('scroll', function() {
  const scrollPercent = (window.scrollY / document.body.scrollHeight) * 100;
  if (scrollPercent > 50 && !window.chatShown) {
    S2SmsChat.show();
    window.chatShown = true;
  }
});

// Show chat on exit intent
document.addEventListener('mouseout', function(e) {
  if (e.clientY < 10 && !window.chatShown) {
    S2SmsChat.open();
    window.chatShown = true;
  }
});

Integration Best Practices​

Page Placement Strategy​

High-Converting Locations​

  1. Property Detail Pages

    • Visitors are actively interested
    • Questions about specific properties
    • Booking assistance needed

  2. Pricing/Rates Pages

    • Cost questions are common
    • Opportunity for special offers
    • Payment plan discussions

  3. Contact Pages

    • Visitors explicitly seeking communication
    • Alternative to forms
    • Immediate response expected

  4. Checkout/Booking Flow

    • Reduce cart abandonment
    • Answer last-minute questions
    • Provide reassurance

Pages to Avoid​

  • Privacy policy / Terms of service
  • Unsubscribe pages
  • Error pages (404, 500)
  • Admin/login areas

Performance Optimization​

Lazy Loading​

Only load the widget when needed:

// Load after 3 seconds on page
setTimeout(function() {
  loadSendSquaredChat();
}, 3000);

// Load on scroll
let chatLoaded = false;
window.addEventListener('scroll', function() {
  if (!chatLoaded && window.scrollY > 100) {
    loadSendSquaredChat();
    chatLoaded = true;
  }
});

Async Loading​

Ensure the widget doesn't block page rendering:

<script async src="https://api.sendsquared.com/sms-chat/v1/s2-sms-chat.min.js"></script>

Mobile Optimization​

Responsive Positioning​

/* Adjust position on mobile */
@media (max-width: 768px) {
  .s2-sms-chat-widget {
    bottom: 10px !important;
    right: 10px !important;
  }
}

Mobile-Specific Messaging​

// Different config for mobile users
const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (isMobile) {
  S2SmsChat.init('MOBILE-CAMPAIGN-ID', 'MOBILE-TEMPLATE-ID');
} else {
  S2SmsChat.init('DESKTOP-CAMPAIGN-ID', 'DESKTOP-TEMPLATE-ID');
}

Customization Options​

Widget Styling​

While the widget comes pre-styled, you can override certain elements:

/* Custom widget button */
.s2-sms-chat-button {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  transform: scale(1.1) !important;
}

/* Pulse animation for attention */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.s2-sms-chat-button {
  animation: pulse 2s infinite;
}

Custom Templates​

Create different message templates for various scenarios:

General Inquiry Template​

"Hi! Thanks for visiting [Property Name]. I'm here to answer any questions about availability, rates, or amenities. How can I help you today?"

After-Hours Template​

"Thanks for reaching out! Our office is currently closed, but I can still help! Leave your message and we'll respond first thing in the morning. For emergencies, call [emergency number]."

Booking Assistance Template​

"Hi! I see you're browsing our properties. I can help you find the perfect vacation rental and even offer exclusive discounts. What dates are you looking to book?"

Troubleshooting​

Widget Not Appearing​

Check Installation​

// Verify scripts are loaded
console.log('Analytics loaded:', typeof S2Analytics !== 'undefined');
console.log('Chat loaded:', typeof S2SmsChat !== 'undefined');

Common Issues:​

  1. Script conflicts: Check browser console for errors
  2. Ad blockers: Some block tracking scripts
  3. CSP headers: Ensure sendsquared.com is whitelisted
  4. Invalid IDs: Verify campaign and template IDs

Widget Appears But Doesn't Work​

  1. Check phone number configuration

    • Ensure number is active in SendSquared
    • Verify 10DLC registration is complete

  2. Verify template settings

    • Template must be active
    • Check business hours in Call Plan

  3. Test opt-in flow

    • Ensure TCPA compliance messages appear
    • Verify consent is being captured

Performance Issues​

Reduce Load Time​

// Preconnect to API domain
<link rel="preconnect" href="https://api.sendsquared.com">
<link rel="dns-prefetch" href="https://api.sendsquared.com">

Monitor Performance​

// Track load time
const startTime = performance.now();
S2SmsChat.init('CAMPAIGN-ID', 'TEMPLATE-ID');
const loadTime = performance.now() - startTime;
console.log(`Chat widget loaded in ${loadTime}ms`);

Analytics & Tracking​

Built-in Analytics​

The SMS Web Chat widget automatically tracks:

  • Widget impressions
  • Open rate
  • Message sent rate
  • Conversion rate
  • Response time

View analytics in SendSquared dashboard under Analytics → Chat Performance.

Custom Event Tracking​

Google Analytics 4​

// Track chat interactions
window.addEventListener('s2-chat-opened', function() {
  gtag('event', 'chat_opened', {
    'event_category': 'SMS Chat',
    'event_label': window.location.pathname
  });
});

window.addEventListener('s2-chat-message-sent', function() {
  gtag('event', 'generate_lead', {
    'value': 10,
    'currency': 'USD'
  });
});

Facebook Pixel​

window.addEventListener('s2-chat-message-sent', function() {
  fbq('track', 'Lead', {
    content_name: 'SMS Chat',
    content_category: 'Website Chat'
  });
});

Compliance Considerations​

TCPA Requirements​

The SMS Web Chat widget automatically handles TCPA compliance by:

  1. Displaying clear opt-in language
  2. Including "Message and data rates may apply"
  3. Showing message frequency
  4. Providing STOP instructions
  5. Capturing and storing consent

Privacy Policy Updates​

Add to your privacy policy:

## SMS Web Chat

When you use our website chat feature, you may choose to provide 
your phone number to receive text messages. By doing so, you 
consent to receive automated text messages from us. Message 
frequency varies. Message and data rates may apply. 

You can opt out at any time by texting STOP.

International Considerations​

  • Widget works for US/Canada numbers only
  • International visitors can engage but need US/Canada phone
  • Consider geographic restrictions if needed

Best Practices​

Response Time Expectations​

Set clear expectations for response times:

  • Business hours: "We typically respond within 5 minutes"
  • After hours: "We'll respond first thing in the morning"
  • Holidays: Configure special holiday messages

Conversation Starters​

Effective opening messages:

  1. "👋 Hi! Looking for your perfect vacation rental? I can help!"
  2. "Questions about [Property Name]? I have answers!"
  3. "Text me for an exclusive 10% discount on your next stay!"

Lead Qualification​

Use initial questions to qualify leads:

  1. "What dates are you looking to travel?"
  2. "How many guests will be staying?"
  3. "What's your ideal vacation rental like?"

Follow-up Strategy​

After initial chat:

  1. Send property recommendations within 1 hour
  2. Follow up next day if no response
  3. Add to nurture campaign if qualified
  4. Request feedback after stay

Advanced Use Cases​

A/B Testing​

Test different approaches:

// 50/50 split test
const variant = Math.random() < 0.5 ? 'A' : 'B';
const config = variant === 'A' ? configA : configB;

// Track variant
window.addEventListener('s2-chat-opened', function() {
  gtag('event', 'experiment_impression', {
    'experiment_id': 'chat_widget_test',
    'variant_id': variant
  });
});

Seasonal Campaigns​

Automatically switch campaigns based on season:

const month = new Date().getMonth();
let campaignId;

if (month >= 5 && month <= 8) {
  campaignId = 'SUMMER-CAMPAIGN-ID'; // Summer season
} else if (month >= 11 || month <= 1) {
  campaignId = 'WINTER-CAMPAIGN-ID'; // Winter season
} else {
  campaignId = 'STANDARD-CAMPAIGN-ID'; // Shoulder season
}

S2SmsChat.init(campaignId, 'TEMPLATE-ID');

Multi-Property Support​

Different widgets for different properties:

// Get property ID from page
const propertyId = document.querySelector('[data-property-id]').dataset.propertyId;

// Map properties to campaigns
const campaignMap = {
  'beachhouse': 'BEACH-CAMPAIGN-ID',
  'mountaincabin': 'MOUNTAIN-CAMPAIGN-ID',
  'cityapt': 'CITY-CAMPAIGN-ID'
};

S2SmsChat.init(campaignMap[propertyId], 'TEMPLATE-ID');

Frequently Asked Questions​

Q: Can I run multiple chat campaigns simultaneously? A: Yes, you can create multiple campaigns and deploy them on different pages or for different purposes.

Q: How are conversations routed to team members? A: Messages are routed based on your Call Plan settings and can be distributed to different phone numbers or team members.

Q: What happens if someone texts outside business hours? A: The system uses your After Hours template and routing rules, ensuring guests always receive appropriate responses.

Q: Can I customize the "We'll text you" title? A: The title is standardized for clarity, but the message content and overall appearance can be customized.

Q: Is there a limit on messages? A: Message limits depend on your SendSquared plan and 10DLC registration throughput.

Q: How quickly do messages deliver? A: Messages typically deliver within 1-3 seconds using carrier-approved routes.

Q: Can I use this for customer support? A: Yes, many clients use SMS Web Chat for sales, support, and general inquiries.

Q: Does this work on mobile devices? A: Yes, the widget is fully responsive and optimized for mobile devices.

Getting Support​

For assistance with SMS Web Chat:

  • Email: support@sendsquared.com
  • Include your Campaign ID and website URL
  • Share any error messages from browser console
  • Provide screenshots of the issue