Skip to main content

How do I put a chat box on my website?

Create a website chat inbox in Peakify, pick how it looks, and get the code for your site.

A website chat widget is a small chat bubble in the corner of your site. A visitor clicks it, the AI answers using what you have taught it, and the conversation lands in your Peakify inbox like any other conversation. If the AI ever hands the chat to your team, it tells the visitor so in the chat itself, and if we have no other way to reach them it asks for an email right there too. While a visitor is reading back through the chat, a new reply does not yank them down to the bottom, a small "New message" button appears instead so they can catch up when they are ready.

Start the connection

  1. Go to Settings, then Channels, then Connections.
  2. Click Connect Website Chat, the card with the globe icon.
  3. Depending on your account, this either opens a form right here, or takes you into Peakify CX Chat to finish there instead. If you do not see a Connect Website Chat card at all, message us and we will set it up with you.

Fill in the basics

  1. Give the inbox a name. This only shows inside Peakify, in your sidebar, never to visitors, so pick something that tells it apart from any other website widget you might add later.
  2. Type the website address you are putting it on, or leave it blank if you do not have a site yet. It is kept for your own records and is not checked.
  3. Pick a widget color. It is used for the launcher button and for your replies inside the chat panel.
  4. Optionally change the welcome heading and tagline visitors see when the panel first opens.
  5. Click Create inbox.

The inbox is created immediately: as soon as you click Create inbox it exists and is ready to take chats.

If Peakify already set up a website chat for you when you signed up and you have not changed it, Create inbox fills in that chat with what you typed instead of making a second one. A chat you have already customised, or already installed on your site, is never touched: you get a new inbox next to it.

Add teammates who can answer

Right after creating the inbox you are asked who should be able to answer these chats. Pick teammates now, or skip this and add people later from the inbox's own settings.

Get your code

The last step shows the install snippet, one line of code that puts the bubble on your site. See How do I put the snippet on my site, and check it's really live? for exactly where to paste it and how to confirm it is working.

Give the bubble your own icon

By default the bubble shows a speech bubble. To use your own picture, such as your logo, open the inbox, go to its Settings tab, and in the card called The bubble, click Upload icon. Pick a square PNG, JPEG or WebP picture up to 1 MB. The icon is saved the moment it uploads, and the preview shows it straight away. To go back to the speech bubble, click Remove next to the icon.

Move the bubble out of the way

If a cookie banner or a back-to-top button already sits in that corner, move the bubble. Open the inbox, go to its Settings tab, and in the card called The bubble, find Nudge it away from the corner. The first box moves the bubble in from the side of the page, the second moves it up from the bottom, both in pixels from 0 to 100. Leave a box empty to go back to 20 pixels, the normal spot, then click Save changes. The open chat panel and the teaser message move with the bubble. On a phone the bubble moves too, but the open chat still fills the whole screen.

What's next

Before sending people to your new chat, add your knowledge base so it can actually answer questions about your business, and decide whether you also want a pre-chat form or an end-of-chat rating.

Was this useful?

More in Channels

The other guides people read alongside this one.

Did this not cover it?

Start a chat and the assistant will try first. If it cannot help, it hands you to a person.

Or email support@peakifycx.com. We answer within 1 business day, Mon–Fri.