Skip to main content
Help your customers get in touch with your business easier by embedding a customizable WhatsApp widget. This widget not only aligns with your brand’s aesthetics but also has many features that will help you improve the overall communication experience of your customer.

​
Key Features

  • Brand Customization: Tailor the widget’s colors to match your brand identity, ensuring a cohesive user experience.
  • Data Collection: Capture insights on customer journeys, including UTM parameters and the pages they navigate from.
  • Hilos Integration: The widget is automatically connected to your Hilos channels, streamlining your workflow.
  • Multiple Responses: Each widget can offer up to four responses—a default text and three quick replies.
  • Flow Triggering: Configure widget responses to match triggers for your Hilos Flows, allowing users to initiate a flow effortlessly.
  • Auto-Update: Install the script once, and any subsequent changes will automatically update the widget without needing to re-install the code.

​
How to Create Your Widget

  1. Access the Widget Configuration: Visit WhatsApp Button under the integrations menu to start configuring your widget.
  2. Customize Your Widget:
    • Default Text: Set the main text that appears in the text box with a send button to the right.
    • Quick Responses: Add up to three quick response options that appear as clickable pills above the default text box.
    • Background Color: Choose the main color for the widget button, send button, and as an accent on the top of the window.
    • Icon Color: Customize the colors for the WhatsApp and send icons.
    • Padding: Adjust the space between the widget and the corner of the page.
    • Position: Decide whether the widget appears on the left or right side of the page.
  3. Save and Implement: Once you’ve configured the widget to your liking, save your changes and click on “Copy Code.” You will receive a code snippet like the following: 
    <script src="https://widget.hilos.io/widget.cjs.production.min.js" data-widget-id="0672509d-f27c-7a94-8000-80c44a7d54df"></script>
  4. Embed the Code: Insert the code snippet between the <body> tags of your website’s HTML. Remember, you only need to set this up once. Any future adjustments to the widget will automatically reflect on your site without needing to update the code again.
By following these steps, you can efficiently set up a WhatsApp widget that enhances customer interaction and provides valuable insights into their behavior. This streamlined process ensures that your website remains a powerful tool for engaging and understanding your audience.