Getting Started
System Requirements Installation & Update Dashboard Settings License Key
Canvas
The Infinite Canvas Kirki Main Menu Pages and Layers Overview The Island Base Elements Design Responsively With Breakpoints
Building Your Pages
Starting From Templates Starting From Pre-Built Blocks
Pages
Pages in Kirki Login Registration Forgot Password Reset Password Retrieve Username 404 Page
Elements
Section Div Block Stack Heading Paragraph Button Image Video Icon Lottie Files Map  Lightbox Navigation Slider Tabs Code  Dropdown Form Elements Vector Shapes
Layers
Overview
Customizing Your Pages
Right Panel Overview Position Layout Flex Grid  Sizing Style Fill Border, Outline, & Radius Filters Glass Effect Shadows Transforms Transitions Spring Transition
Typography
How to Add & Edit Text Reusable Text Styles Adding Custom Fonts Variable Fonts Typography Properties Open Type Feature Properties
Components
Components Header and Footer
Classes
Classes
Variables
Variables
Interactions & Animations
Interactions Interaction Library Interaction Timeline Editor Text Animations
Form Builder
ReCAPTCHA Forms Form Manager
Popup Builder
Popup Builder
Dynamic Content
Dynamic Content Manager  Collections Collection Fields Collection Items Display Collections Collection References Dynamic Image Gallery Collection Search & Filter
Dynamic Data Basics
Creating Dynamic User Lists and Single User Templates  Filter WordPress Posts Using Collection
Visibility Conditions
Visibility Conditions
Apps
Facebook Login Google Login Intercom Mailchimp SMTP X (Twitter) Login ActiveCampaign Drip GetResponse HubSpot Live Chat Kit (ConvertKit) LiveChat MailerLite MooSend  Pexels Unsplash Zoho SalesIQ
Figma to Kirki
Figma to Kirki
Collaboration
Real-Time Collaboration Pusher for Real-Time Collaboration Comments  Versions
Custom Code
Custom Code
SEO
SEO And OpenGraph
Review and Publish
Audit Preview Save & Publish
Migration
Migrating from Droip to Kirki
Tutorials
How to Translate a Kirki Website With Weglot 
Getting Started
System Requirements Installation & Update Dashboard Settings License Key
Canvas
The Infinite Canvas Kirki Main Menu Pages and Layers Overview The Island Base Elements Design Responsively With Breakpoints
Building Your Pages
Starting From Templates Starting From Pre-Built Blocks
Pages
Pages in Kirki Login Registration Forgot Password Reset Password Retrieve Username 404 Page
Elements
Section Div Block Stack Heading Paragraph Button Image Video Icon Lottie Files Map  Lightbox Navigation Slider Tabs Code  Dropdown Form Elements Vector Shapes
Layers
Overview
Customizing Your Pages
Right Panel Overview Position Layout Flex Grid  Sizing Style Fill Border, Outline, & Radius Filters Glass Effect Shadows Transforms Transitions Spring Transition
Typography
How to Add & Edit Text Reusable Text Styles Adding Custom Fonts Variable Fonts Typography Properties Open Type Feature Properties
Components
Components Header and Footer
Classes
Classes
Variables
Variables
Interactions & Animations
Interactions Interaction Library Interaction Timeline Editor Text Animations
Form Builder
ReCAPTCHA Forms Form Manager
Popup Builder
Popup Builder
Dynamic Content
Dynamic Content Manager  Collections Collection Fields Collection Items Display Collections Collection References Dynamic Image Gallery Collection Search & Filter
Dynamic Data Basics
Creating Dynamic User Lists and Single User Templates  Filter WordPress Posts Using Collection
Visibility Conditions
Visibility Conditions
Apps
Facebook Login Google Login Intercom Mailchimp SMTP X (Twitter) Login ActiveCampaign Drip GetResponse HubSpot Live Chat Kit (ConvertKit) LiveChat MailerLite MooSend  Pexels Unsplash Zoho SalesIQ
Figma to Kirki
Figma to Kirki
Collaboration
Real-Time Collaboration Pusher for Real-Time Collaboration Comments  Versions
Custom Code
Custom Code
SEO
SEO And OpenGraph
Review and Publish
Audit Preview Save & Publish
Migration
Migrating from Droip to Kirki
Tutorials
How to Translate a Kirki Website With Weglot 

HubSpot Live Chat

HubSpot Live Chat

HubSpot’s Conversations tool provides a live chat widget that lets your team communicate with website visitors in real time. Conversations can be associated with HubSpot contact records, keeping your sales and support interactions connected to your CRM. 

Connect the HubSpot Live Chat integration to your Kirki website, allowing visitors to chat with your team through a HubSpot chat widget. 

What Is the HubSpot Live Chat App

The Kirki HubSpot Live Chat integration installs the HubSpot tracking code on your website. Once connected, this allows a published HubSpot live chat flow to appear on your site and route incoming conversations to your team. 

What You Need Before Connecting HubSpot Live Chat

Before connecting HubSpot Live Chat to Kirki, make sure you have:

  • An active HubSpot account.
  • Your HubSpot Hub ID (Portal ID).
  • At least one user or team available to receive live chat messages.
  • A published Live Chat chatflow in HubSpot.

To add HubSpot live chat to Kirki, copy your Hub ID from HubSpot, create and publish a website chatflow, install the HubSpot Live Chat app in Kirki, and paste your Hub ID into its Widget Key field. 

How to Find HubSpot Hub ID

  1. Log in to your HubSpot account.
  1. Open Settings.
  1. Go to Tracking & Analytics → Tracking Code.

HubSpot settings sidebar highlights tracking and analytics options in account settings.

  1. Scroll down, then expand the WordPress Installation section and locate your Hub ID or Portal ID.
  1. Copy the ID and keep it available for the Kirki configuration.

HubSpot WordPress installation settings highlight the website tracking code and copy button.

Note: The Hub ID identifies your HubSpot account and allows the HubSpot widget installed on your website to connect to the correct account.

How to Create and Publish a HubSpot Live Chatflow

Before configuring Kirki, create and publish the chatflow you want to display on your website. 

  1. In HubSpot settings, go to Service and Open Chatflows.

HubSpot navigation menu opens chatflows through the Conversations settings submenu.

  1. Click Create chatflow.

HubSpot chatflows page presents the option to create a new chatflow.

  1. Select Website.

HubSpot chatflow setup asks which channel should host the customer chat.

  1. Choose Live chat widget; if Live Chat widget visuals are not configured before, configure it.

HubSpot chatflow setup asks users to select an appropriate chatflow type.

  1. Continue through the configuration for the Live Chat ChatFlow as prompted in HubSpot. (Channel > Workspace> Chatflow> Knowledge Base)

HubSpot chatflow builder displays website chat settings and a conversation preview.

  1. After finishing them, publish the Live Chat.

Kirki editor shows a HubSpot chat widget preview on the published page.

Note: The chatflow must be published in HubSpot before it can appear on your website.

How to Install the HubSpot Live Chat App in Kirki

  1. Log in to your WordPress dashboard.
  1. Go to Kirki → Apps.
  1. Locate HubSpot Live Chat.
  1. Click Install.

How to Configure the HubSpot Live Chat Integration

  1. Go to Kirki → Apps → HubSpot Live Chat → Settings.
  1. Paste your HubSpot Hub ID (Portal ID) into the Widget Key field provided and click Save Configuration.

Kirki Apps panel shows HubSpot Live Chat configured with website widget settings.

Kirki will install the HubSpot tracking code on your website, allowing your published HubSpot live chat flow to load.

How to Test the HubSpot Live Chat Integration

  1. Open your website in a fresh browser window or private browsing session.
  1. Confirm that the HubSpot chat launcher appears.

Published Kirki website displays the HubSpot chat widget open

Note: The chat launcher can take a few minutes to appear after you save. If it doesn’t, clear your site cache and reload

  1. Open the chat widget and send messages.
  1. In HubSpot, open your Inbox. Confirm the test conversation appears, then reply and check that the reply shows in the widget on your site.

Was this page helpful?

Our website uses cookies to improve your browsing experience on our website. By continuing to use this website, you agree to their use. For details, please check our Privacy Policy.