April 29, 2024

What are the steps to integrate live chat on our website using HubSpot?

Hubspot logo

Step 1: Log into HubSpot

  • Visit the HubSpot login page.
  • Enter your credentials to access the dashboard.

Step 2: Navigate to Conversations

  • From the main dashboard, go to the top navigation bar.
  • Click on "Conversations."

Step 3: Select "Chatflows"

  • Inside the Conversations drop-down, choose "Chatflows."

Step 4: Create a New Chatflow

  • Click the "Create Chatflow" button.

Step 5: Choose Website Chat

  • From the options available, select "Website."

Step 6: Configure the Chat Channel

  • Decide if you want the chat to be managed by a team or an individual.
  • Assign the necessary team or individuals.

Step 7: Design the Chat Appearance

  • Choose the color and style to match your website's branding.
  • Decide on the location of the chat icon on your website.

Step 8: Set Up the Greeting Message

  • Configure the initial message visitors will see when the chatbox opens.

Step 9: Create Canned Responses (Optional)

  • For faster interactions, you can create preset responses to common inquiries.

Step 10: Configure Targeting Rules

  • Determine when and where the chatbox should appear.
  • For example, only on specific pages or after a set amount of time spent on the site.

Step 11: Set Availability

  • Adjust settings to determine when live agents are available.
  • Decide on the message that will appear outside of those hours.

Step 12: Integrate Chatbots (Optional)

  • If you wish to use a chatbot for after-hours or to handle initial queries:
  • Choose "Add Bot."
  • Configure the bot's replies and actions based on visitor input.

Step 13: Embed the Code on Your Website

  • Once satisfied with the chat settings:
  • Click on "Get code."
  • Copy the provided code.
  • Go to your website's backend and embed the copied code into the site's HTML or appropriate section.

Step 14: Test the Chat Functionality

  • Visit your website.
  • Engage with the live chat to ensure it works as expected.

Step 15: Monitor and Adjust

  • Regularly review chat interactions and feedback.
  • Make adjustments as necessary to improve user experience and lead capture.