Add the chat widget to your site

Put the ProjectHQ chat widget on your website, choose where it shows up and make it look like your brand.

The chat widget is the chat button visitors see on your website. It doesn't need its own code: it comes with the ProjectHQ tracking script, so once the script is on your site you only decide whether the widget is live, where it appears and how it looks.

Before you start

Install the tracking script on your site — see Install the tracking script. Until it's installed, Live Chat shows Put your AI assistant on your site with a button that walks you through it.

Your project already has one chat widget. When ProjectHQ analyses your website, it names the widget after your business, writes a greeting ("Hi! I'm …'s assistant. Ask me anything."), turns on the AI assistant and makes the widget live — so after installing the script, the widget usually shows up on your site right away.

Tip: If the script is installed but the widget is hidden, Live Chat shows Enable the chatbot. Click Enable chatbot to make it live.

Open the chat widget settings

  1. Click Settings at the bottom of the menu.
  2. Under Chat widgets, click your widget.
  3. Pick a section: General, Appearance or AI assistant.

You can also click the gear in the small toolbar on the right edge of the Live Chat page — it opens the settings of your first widget. All three sections edit the same widget, so make your changes and click Save Changes at the bottom.

General: go live, greet, choose pages

The General section of a chat widget, with New chat widget highlighted in the list: the Live switch, Chat Details with Name and Welcome Message, and Behavior with Sound Notifications and Page Targeting set to Only these pages
  • Live / Offline — the switch at the top. Live means visitors can see and use the widget; Offline hides it from your site. Nothing else changes, so you can take it down and bring it back any time.
  • Name — an internal name, for you only. Visitors never see it.
  • Welcome Message — the greeting a visitor sees when they open the chat. It also pops up next to the chat button a few seconds after the page loads, or as soon as the visitor hovers over the button.
  • Translations — click it to write the greeting in other languages. Visitors whose browser is set to one of them see that version; everyone else sees the default message. The widget's own buttons and labels follow the visitor's language automatically.
  • Sound Notifications — plays a short sound for the visitor when a new reply arrives.
  • Page Targeting — where the widget appears:
Option What happens
All pages The widget appears on every page that has the tracking script.
Only these pages It appears only on pages that match the patterns you add. With no pages added, it appears nowhere.
All pages except It appears everywhere except on matching pages.

To add a pattern, type it and press Enter or click Add. Use * as a wildcard and start a pattern with ! to exclude it — for example /blog/* matches every blog post, and !/app/sign-in leaves out the sign-in page.

Appearance: colours, position and button

The Appearance section: Primary Color, Widget Position, Launcher Size, Launcher Margin, Welcome Popup Position and Chat Launcher Icon
  • Primary Color — the main colour of the chat window.
  • Widget Position — Bottom Right, Bottom Left, Bottom Center, Top Right, Top Left or Top Center.
  • Launcher Size — Small, Medium or Large chat button.
  • Launcher Margin — the distance from the edges of the page, in pixels (Top, Bottom, Left, Right). Raise it if the button covers something on your site, like a cookie banner.
  • Welcome Popup Position — whether the greeting pops up Above, Below, Left or Right of the button.
  • Chat Launcher Icon — pick the icon on the chat button, or upload your own, and set its Background Color.

The look of the AI assistant itself — its animation and whether it replaces the chat button — lives in the AI assistant section. See Set up your AI assistant.

Use different widgets on different pages

You can have more than one widget — for example a sales-focused one on your pricing pages and a support one everywhere else. Each has its own greeting, look and AI instructions.

  1. In Settings, click New chat widget under Chat widgets.
  2. Give it a Name and click Create widget.
  3. In General, Page Targeting is already set to Only these pages — add the pages it's for.
  4. In AI assistant, switch on Enable AI if you want the AI to answer in this widget too, and click Save Changes.

When a page matches one of your extra widgets, that widget appears. Everywhere else your first (default) widget appears, following its own Page Targeting. The default widget can't be deleted; the others can, with the bin icon next to Save Changes.

Tip: A new widget starts on no page, with the AI off, so it can't take over your site before it's ready. Until you add pages, its General section says Not shown on any page yet — add pages under Page Targeting below, and your default widget keeps serving the whole site.

Control the widget from your own code

If you're a developer, the tracking script gives you a few commands — for example to open the chat from your own "Talk to us" button:

window.projecthq.openChat();   // open the chat window
window.projecthq.closeChat();  // close it
window.projecthq.toggleChat(); // open or close it
window.projecthq.hideWidget(); // hide the chat button on this page
window.projecthq.showWidget(); // show it again

If your visitors sign in on your site, identify them so the chat knows who they are — see Track events and identify visitors.

Add the chat widget to your site — ProjectHQ Docs