Version: Peki

Website chat

The website chat puts your agent on your own site. Visitors chat with it in a bubble in the corner of every page, or in a chat box inside a page. You set it up once on the agent's Channels page, paste one line of code into your site, and every conversation shows up in the Inbox.

Set it up

Publish the agent at least once. Customers always talk to the published version. See Publishing and versions.
Open the agent and go to Channels → Website chat.
Turn on Show the chat on your website.
Pick a Style, a Colour and a Welcome message. The Preview on the right shows the result before you save.
Under Allowed websites, add your site, for example https://shop.example.com.
Press Save. The Embed code appears.
Press Copy and paste the code into your site.
Press Try it to open a test page with your real widget.

The status next to the card's title reads not set up yet until the first save, then On or Off.

Settings

Setting	What it does	Default
Show the chat on your website	Turned off, the widget disappears from your site and its address stops answering. Your settings and embed code are kept.	Off
Style	Bubble: a button in the corner of every page; the chat opens over the page. Chat box: a chat box inside your page, always open, where you paste the code.	Bubble
Colour	The colour of the bubble, the header, the visitor's messages and the buttons. Pick it or type a hex code like `#E5482D`. Text on it turns black or white automatically, whichever reads better.	`#1C1A17` (near black)
Welcome message	The first message visitors see, from the agent. Write it in English and Turkish; each version up to 500 characters.	"Hi! How can we help you today?" / "Merhaba! Size nasıl yardımcı olabiliriz?"
Allowed websites	The sites that may show the chat. Up to 20. Empty means any site.	Empty (any site)

The chat's header shows the agent's name, as set in the agent's settings.

Every change applies as soon as you press Save, on every page where the widget is already embedded. No publish needed, and you don't need to change the code on your site.

note

The welcome message is shown by the widget only. The agent doesn't see it and doesn't know it was shown.

The embed code

After the first save, the Embed code box shows your code. It looks like this, with your own key:

<script src="https://peki.ai/widget.js" data-key="pw_xxxxxxxxxxxxxxxxxxxxxxxx" async></script>

Always copy it from the Channels page: the data-key is unique to this agent. The key is public by design. It only lets a browser open this agent's chat, nothing else.

Where to paste it:

Bubble: before </body>, on every page where the chat should appear. Most site builders have a "custom code" or "footer scripts" setting that adds it to every page at once.
Chat box: exactly where the chat box should appear in your page, for example in a "Contact us" section. It takes the full width of its container.

Options on the script tag

You can add these attributes to the script tag. They change only the page they are on.

Attribute	What it does	Example
`data-key`	Which agent's chat to open. Required.	`data-key="pw_…"`
`data-layout`	Overrides the Style setting for this page: `bubble` or `inline` (chat box).	`data-layout="inline"`
`data-height`	The chat box's height in pixels. Between 360 and 2000; 560 when not set. Only for the chat box.	`data-height="700"`
`data-lang`	The widget's language: `en` or `tr`. Without it, the visitor's browser language decides: Turkish browsers get Turkish, everyone else English.	`data-lang="tr"`

A chat box on a support page, 700 pixels tall, in Turkish:

<div class="support-chat">
  <script src="https://peki.ai/widget.js" data-key="pw_xxxxxxxxxxxxxxxxxxxxxxxx" data-layout="inline" data-height="700" data-lang="tr" async></script>
</div>

The widget loads only once per page, even if the code is pasted twice.

Allowed websites

By default any site can show your chat. To make sure only your own sites can, add them under Allowed websites.

Type the address and press Return or Add website. If you leave out https://, it is added for you.
Enter the site's origin only: the scheme, the host and the port if there is one. https://shop.example.com is right; https://shop.example.com/contact is refused with "Use a site address like https://shop.example.com".
Each address must match exactly. https://example.com and https://www.example.com are different sites: add both if your site uses both. So are http:// and https://, and different ports, like http://localhost:3000 for local development.
Up to 20 sites.

With a list in place, the widget on any other site is refused before it loads ("This website may not use this chat"), and nothing appears there. The Try it test page in Peki always works, whatever the list says.

tip

Add your sites before you go live. Without a list, anyone who copies your embed code can show your agent on their site, and their visitors' messages count toward your usage.

What visitors can do

Chat. Messages up to 2,000 characters. Return sends, Shift + Return adds a line. Replies are formatted (bold, lists, links, tables, code).
Send files. The paperclip attaches photos (JPEG, PNG, WebP, GIF), PDFs and text files (TXT, MD, CSV), up to 10 MB each and 5 per message. See Files and attachments.
Start over. New conversation (the + in the header) appears once something was said. It starts a fresh conversation; the old one stays in your Inbox.
Rate the conversation. When the agent has answered and the conversation has been quiet for 2 minutes, or your team resolved it, the widget asks "Was this helpful?" with 👍 and 👎. After 👎 the visitor can add a comment of up to 500 characters. Ratings show in Analytics.
See your team. When a teammate takes over, their replies show with their first name and Team.

The widget's own buttons and messages ("Write a message…", "Powered by Peki" and so on) come in English or Turkish, following data-lang or the browser. The agent answers in whatever language the visitor writes in.

Returning visitors

The widget remembers a visitor in their browser, separately for each agent. When they come back, they continue their current conversation, unless it was resolved or has been quiet longer than the agent's Start a new session after setting (24 hours by default). See Customers.

A visitor who clears their browser data, uses another browser or device, or browses privately starts as a new visitor.

Identifying logged-in users

The website chat can't receive the identity of a user who is signed in on your site. Every visitor is anonymous to the agent, shown as Visitor in the Inbox until your team names them.

If you need the agent to know who it's talking to (for example to look up a customer's orders by their account), build the chat in your own app with the Sessions API and send your user's id as customer.id. See API overview.

Theming

The widget's look is fixed apart from the Colour and the Style. It runs in its own isolated area of the page (a shadow root), so your site's CSS can't change it, and its CSS can't affect your site. The bubble sits 20 pixels from the bottom right corner, above other content.

Trying it

Try it opens a test page in a new tab with your real widget, in both styles. It is available once the widget is on, saved, and the agent is published; otherwise the button says "Turn the widget on, save, and publish the agent to try it."

warning

Conversations on the Try it page are real: they use the published agent, count as real conversations, and appear in the Inbox and Analytics with the customer Widget tester. To test a draft, use the Test panel instead.

Limits

To protect your agent from floods, the widget has rate limits. Visitors who hit one see a short message and can try again shortly.

Limit	Value
Messages per visitor	20 per minute
Messages from one network to this chat	200 per hour
Messages to this chat in total	120 per minute
New conversations from one network	20 per hour
Files per visitor	20 per hour
Files from one network to this chat	60 per hour
Ratings per visitor	10 per minute

Troubleshooting

Problem	Why, and what to do
The widget doesn't appear at all	Check that Show the chat on your website is on and saved. Check the `data-key` matches the one on the Channels page. If you use Allowed websites, check your site's exact address is listed (with or without `www`, `http` or `https`).
It shows "This chat is not available right now."	The agent isn't published yet. Publish it.
The chat box shows in the wrong place	With Chat box, the widget appears exactly where the script tag is. Move the tag into the container you want. If the tag is in `<head>`, the box goes to the end of the page.
The bubble appears instead of the chat box (or the other way round)	Check the Style setting, and whether the tag has a `data-layout` attribute, which wins.
Visitors lose their conversation on every page	Their browser blocks site storage (some privacy settings do), so they're a new visitor on each load.
The widget is in the wrong language	Add `data-lang="en"` or `data-lang="tr"` to the tag.
"Could not send. Please try again."	A network problem, or a rate limit. Wait a moment and send again.
Visitors see "This assistant is very busy right now. Please try again later."	Your workspace's daily reply limit was reached.

Set it up​

Settings​

The embed code​

Options on the script tag​

Allowed websites​

What visitors can do​

Returning visitors​

Identifying logged-in users​

Theming​

Trying it​

Limits​

Troubleshooting​

Related​