Product
Integrations

Chat Widget

6min

The Chat Widget Integration allows you to add a live chat feature to your website, enabling real-time customer support and engagement. This customizable widget integrates seamlessly with Sanoflow, ensuring all messages are centralized and manageable from your inbox.

Getting Here

  • Log in to your Sanoflow account.
  • From the left-hand menu, go to Settings > Integrations.
  • Select the Add Channel tab under the Messaging section.

Adding the Chat Widget to Your Website

  1. Navigate to the Integrations Section:
    • Log in to Sanoflow.
    • Go to Settings > Integrations > Add Channel.
  2. Select Chat Widget:
    • Under the Messaging category, click on Chat Widget.
  3. Configure Widget Settings:
    • Fill in the following fields:
      • Channel Name: Name your widget channel (e.g., "Support Chat").
      • Domain: Enter the domain where the widget will appear (e.g., example.com).
      • Widget Title: Provide a user-friendly title for the widget (e.g., "Chat with Us").
      • Widget Color: Choose a color that matches your brand's theme.
      • Widget Icon: Upload an icon or use the default option.
  4. Save and Generate Code:
    • Click Save to save your configurations.
    • Copy the generated widget code.
  5. Embed the Widget Code:
    • Paste the widget code into the <head> section of your website’s HTML file.
    • Save changes to your website’s code and reload the page to view the widget.
  6. Test the Widget:
    • Visit your website to test the widget functionality.
    • Ensure messages sent via the widget appear in your Sanoflow inbox.

Requirements for Chat Widget Integration

  1. Valid Domain: Ensure the domain entered in the widget settings matches the website where the widget will be embedded.
  2. Permissions:
    • Admin access in Sanoflow is required to configure the widget.
    • Editing access to your website’s HTML code is needed to embed the widget.
  3. Browser Compatibility:
    • Ensure your website supports modern browsers for optimal widget performance.

Best Practices for Using the Chat Widget

  1. Custom Branding:
    • Match the widget color and title to your website’s design for a seamless user experience.
  2. Quick Response:
    • Set up automatic replies in Sanoflow to acknowledge customer messages immediately.
  3. Widget Placement:
    • Position the widget in a visible location, such as the bottom-right corner of your website.
  4. Proactive Engagement:
    • Use triggers to open the chat widget automatically for users on specific pages.
  5. Mobile Optimization:
    • Test the widget on mobile devices to ensure a smooth experience for all users.

Common Issues and Troubleshooting

  • Cause: The widget code was not correctly embedded in the website’s HTML.
  • Solution: Verify the code is pasted in the <head> section of your HTML file.
  • Cause: Incorrect domain configuration.
  • Solution: Ensure the domain entered in Sanoflow matches the live website domain.
  • Cause: Poor internet connectivity or server delays.
  • Solution: Check your internet connection and ensure Sanoflow servers are operational.
  • Cause: Improper website responsiveness settings.
  • Solution: Optimize your website for mobile compatibility and test widget placement.
  • Cause: Missing permissions in Sanoflow.
  • Solution: Check and update your Sanoflow permissions to allow chat functionality.

FAQs

  1. Can I customize the widget’s appearance?
    • Yes, you can customize the widget’s color, title, and icon to match your brand.
  2. What happens if I embed the widget on multiple domains?
    • You need to configure the widget separately for each domain in Sanoflow.
  3. Does the widget work offline?
    • No, the widget requires an active internet connection to send and receive messages.
  4. Can I track the widget’s performance?
    • Yes, you can track chat volume and response times through Sanoflow’s reporting tools.
  5. How do I disable the widget temporarily?
    • Remove the widget code from your website’s HTML or deactivate it in the Sanoflow settings.
  6. Does the widget support multiple languages?
    • Yes, you can configure auto-replies and messages in multiple languages.
  7. Can I restrict the widget to specific pages?
    • Yes, embed the widget code only on the desired pages of your website.
  8. What data is collected through the widget?
    • The widget collects customer messages and any data shared during the conversation.
  9. Is the widget GDPR compliant?
    • Yes, the widget complies with GDPR when used with Sanoflow’s privacy features.
  10. How do I reset the widget settings?
    • Go to Settings > Integrations, select the Chat Widget, and update the configurations.