Introduction

In this comprehensive guide, we will walk you through the process of installing webchat widgets onto your website, enabling real-time communication with your visitors.

Whether you're using a funnel builder like LightFunnels or a WordPress site, this tutorial covers multiple methods to embed the chat widget effectively.

Additionally, you'll learn how to customize the widget's appearance and behavior, including embedding options, placement, and trigger mechanisms. This ensures you can tailor the chat experience to suit different pages and use cases, enhancing user engagement and support.

Step-by-Step Installation and Customization

1. Obtaining the Webchat Widget Script

• Access the Script:
  The first step involves copying the installation code for the floating chat model. This script is typically provided in your webchat service dashboard.

• Copy the Script:
  Simply select and copy the script code, which will be used for embedding into your website.

2. Installing on Funnel Builders (e.g., LightFunnels)

a. Embedding via Main Header (Global Installation)

• Navigate to Settings:
  Inside your funnel builder, go to the Settings section.

• Add Custom Scripts:
  Locate the Custom Scripts area, often labeled as Header Scripts or similar.

• Paste the Script:
  Insert the copied webchat script into this section.

• Save and Preview:
  Save your changes and preview your funnel pages.

  • Result: The floating chat widget appears on the right side of all pages, including blog sections and articles.

b. Embedding on Specific Pages

• Page-Level Custom HTML:
  For targeted placement, go to the specific page's Custom HTML or Header Script section.

• Paste and Save:
  Insert the script here, then save.

• Result:
  The widget appears only on that particular page, not across the entire funnel.

3. Installing on WordPress Websites

• Result: The chat widget loads on your WordPress site, accessible from all pages or specific ones based on placement.

4. Embedding Styles and Variations

The webchat widget can be customized in style and placement:

• Full Page Embed:
  Embeds the chat across the entire page, ideal for landing pages or support pages.

• Inline Embed:
  Embeds the chat window within specific sections of your page, allowing for contextual placement.

• Pop-up Triggered by Button or Icon:

  • Default Icon: Located at the bottom right corner, clicking opens the chat window.

  • Custom Button: Add a button with a specific class (e.g., bot-trigger-button) to trigger the chat window programmatically.

5. Embedding the Chat Window

• Full Page Embedding:
  Embed the entire chat widget code into a page to load it across the entire page.

• Partial Embedding:
  Insert the widget into specific sections, such as headers, footers, or within content blocks.

• Custom Placement:
  Use HTML and CSS to position the chat window precisely where needed, including above or below text, images, or other elements.

6. Triggering the Chat Widget with Buttons

• Adding a Trigger Button:
  To enable chat activation via a button, add an HTML element with a specific class or ID.

• Example:

  <button class="bot-trigger-button">Chat with us</button>

• Functionality:
  When clicked, this button will open the chat window, providing a seamless user experience.

• Implementation Tip:
  Ensure your website's JavaScript includes the necessary code to listen for button clicks and trigger the chat.

7. Customizing Chat Flows Based on Page Context

In upcoming tutorials, you'll learn how to:

• Create Different Flows:
  Set up tailored conversations for various pages, such as support, sales, or feedback.

• Trigger Flows Dynamically:
  Use page-specific triggers to initiate different chat flows automatically.

• Example Use Cases:

Summary

By following these steps, you can effectively install and customize webchat widgets on your website, enhancing user engagement and support capabilities. Whether through global embedding or page-specific placement, the flexibility allows you to tailor the chat experience to your visitors' needs. Additionally, trigger mechanisms like buttons and flow customization enable a dynamic and personalized interaction, ultimately improving customer satisfaction and conversion rates.

Remember: Always preview your changes to ensure the widget appears correctly and functions as intended. As you become more comfortable with these tools, you can explore advanced customization options, including styling, automation, and flow management, to further optimize your webchat experience.