Live chat setup

Enable live chat on your website to let customers reach you instantly, providing them with a seamless way to connect with your business.

Why use live chat?

  • Instant customer support: Address customer inquiries in real-time.

  • Increased engagement: Encourage more interactions with your website visitors.

  • Streamlined communication: Collect essential customer information through pre-chat forms for seamless follow-ups.

  • Higher customer satisfaction: Customers prefer the efficiency of live chat over phone.

  • Boost conversion: Faster response translates into more opportunities.

Steps to embed live chat:

  1. On your Distance dashboard, go to Channels > Your Distance page section.

  2. Click the Embed code button > copy and paste it inside the <body> tag of your website.

Shadow DOM Implementation

A Shadow DOM has been added to encapsulate the widget’s styles and prevent external interference.

  1. Adjust widget placement:

  • Position the chat widget on your website (e.g., bottom-right corner).

  • Add optional label text, such as "Request a quote."

    Handling Widget Size Issues

    If the live chat widget does not follow the predefined width and height, causing style inconsistencies (e.g., appearing too skinny), follow these steps:

    1. Iframe Constraints (e.g., Wix)

      • When embedded inside an iframe (such as on Wix), the widget may still be constrained by the iframe’s size.

      • To resolve this, ensure that the iframe’s width and height are set to 100%: Example:

    2. Predefined Widget Dimensions

      • The widget’s predefined size should be:

        • Minimum height: 550px

        • Width: 423px

      • The widget should be added inside the <body/> tag of the website for proper rendering.

    3. Using Code Injection

      For best results, always use code injection when embedding custom scripts like live chat widgets. This ensures proper placement and styling without interference from other site elements.

      To add a chat widget using code injection:

      1. Open the Code Injection panel in your website’s settings.

      2. Insert the appropriate HTML or JavaScript in the header or footer section, depending on the required placement.

      3. Save the changes to apply the updates site-wide.

      By using code injection, you ensure your widget functions smoothly and adheres to your site’s structure without conflicts.

  1. Preview your chat widget Review how the widget looks in different views (online, offline, and pre-chat) to ensure it aligns with your branding and customer needs.

  1. Publish and embed the widget Once satisfied, click Publish. You can embed the widget code into your website by following the instructions or sharing it with your technical team.

  • Click the Embed button

  • Copy the provided code snippet and paste it into the <body> tag of your website's HTML, preferably before the closing </body> tag.

  • Save your changes and refresh your website to verify that the chat widget appears as expected.

By setting up a live chat, you create a direct and convenient way for customers to connect with your business, improving customer satisfaction and boosting lead generation.

Looking for more help? Watch our step-by-step tutorial to easily master setting up your live chat!

PreviousConnecting channelsNextDistance Page Customization

Last updated