Distance
  • Welcome to Distance! 🎉
  • Getting Started
    • Quickstart
      • Connecting channels
        • Live chat setup
          • Distance Page Customization
        • SMS channel setup
        • Social channels setup
        • Email channel setup
    • Tickets
    • Contacts
    • Agent
      • Agent
        • Customize agent
        • Knowledge base
        • Custom questions
      • Conversation automation
        • Automation schedule
        • Active channels
        • Stop words
      • Ticket Automation
        • Auto-ticketing
        • Assignment Rules
    • Playground
    • Forms
    • Settings
    • Ticket pipeline
Powered by GitBook
On this page
  1. Getting Started
  2. Quickstart
  3. Connecting channels

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.

PreviousConnecting channelsNextDistance Page Customization

Last updated 22 days ago

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.

SquareSpace

  1. Navigate to your SquareSpace page and click the edit button (top left corner of your SquareSpace webpage)

  1. Hover over the first section of your page. Click add block. From the block menu, click Embed.

  1. Once the embed block is shown, click the pencil icon to edit.

  1. Under Embed As, click Code Snippet and then Embed data right below.

  1. Go back to your Distance account and copy the code snippet from the embed button in the Set up live chat section. Paste the code in the Embed data field.

  1. An embedded scripts pop up will appear. Click preview in safe mode to show the live chat embed.

  1. Move to desired location. Save and publish.

For more help, follow the guide on SquareSpace.

https://support.squarespace.com/hc/en-us/articles/206543617-Embed-blocks?platform=v6&websiteId=678a985adb1bc74063289692

Wix

  1. Head over to the webpage you want to add the live chat embed to. On the left hand side, click Add elements.

  1. Navigate down the list to Embed Code and then Popular Embeds. Select Emed HTML.

  1. In the HTML Settings, click the Code option. Return to your Distance account and copy the code snippet from the embed button in the Set up live chat section. Paste the code in the box below.

  1. Once the live chat widget appears, right click the box and click Pin to Screen. This will allow the widget to stay on the page even when the user scrolls. Select a side where you want to pin.

  1. Save and publish.

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