> ## Documentation Index > Fetch the complete documentation index at: https://docs.baza.chat/llms.txt > Use this file to discover all available pages before exploring further. # Chat on your website > A chat button on your website, in your colours, added with one line of code. Add a chat button to your website. It shows your assistant's name, your colours and your own greeting. ![The chat open on a website](https://mintcdn.com/vano-studios-46fa5f1a/lH7Vk5W4uqCCUBiN/images/widget.png?fit=max\&auto=format\&n=lH7Vk5W4uqCCUBiN\&q=85\&s=ff2517d484229cb0942b98255bf17cf4) ## Add it **1. Open the website chat** On your assistant's page, go to [**Channels**](https://baza.chat/dashboard/channels) and press [**Configure**](https://baza.chat/dashboard/assistant) on [**Widget**](https://baza.chat/dashboard/channels?tab=widget). **2. Make it yours** Choose its colours, where it sits on the page, its greeting and suggested questions. The preview shows it the way customers will see it. **3. Copy the line of code** Paste it into your website. Most website builders have a place for custom code: paste it there. If someone else looks after your website, send the code to them. See [Install it on your platform](#install-it-on-your-platform). ![The website chat settings, with the line of code to paste](https://mintcdn.com/vano-studios-46fa5f1a/lH7Vk5W4uqCCUBiN/images/widget-editor.png?fit=max\&auto=format\&n=lH7Vk5W4uqCCUBiN\&q=85\&s=fc326182e921db42d79a557062b2608e) Each assistant has its own website chat. Its [suggested questions](https://docs.baza.chat/channels/chat-page.md#suggested-questions) are the same list as your chat page's. ## Install it on your platform Under **Add it to your website**, pick how your website is built and copy the code. You paste it once, and the chat shows on every page. On WordPress, paste it into your theme's footer, or use a plugin that adds code to the footer of every page. For anything else, a developer usually does this part. > [accordion] For your developer > > Pick the tab for how the site is built, then put the code here: > > | Tab | Where it goes | > | - | - | > | **HTML** | On every page, just before the closing `` tag. | > | **React** | Add the `BazaChat` component, then render `` once in your root component. | > | **Next.js** | Add the `Script` to your root layout (`app/layout.tsx`). | > | **Vue** | Add it to `main.js`, after `app.mount()`. | > | **WordPress** | Your theme's footer, or a plugin that adds code to every page's footer. | To check it worked, open your website. Within a minute of your site loading the chat, Baza shows where it's running, like **Working on yourbusiness.com**, and when it was last seen. Until then, its card under [**Channels**](https://baza.chat/dashboard/channels) says **Not on your website yet**. ## Greeting visitors The chat can say hello on its own, so visitors know they can ask. Turn on **Say hello on its own** under **Greeting**. | Setting | What it does | | - | - | | **After** | How long a visitor is on your site before the hello: 15 seconds to 5 minutes (1 minute unless you change it). | | **Play a sound** | A soft chime when the greeting appears. | | **Message** | Up to 160 characters. Leave it empty to use your welcome message. | The greeting pops up beside the chat button after the time you choose. Time on all your pages adds up. Tapping the greeting opens the chat with the same words. * Each visitor sees it once a day at most. Once they open the chat or close the greeting, they don't see it again on that visit. * Someone already chatting with you isn't greeted. Nobody is greeted while your assistant is paused. * Web browsers play sound only after a visitor has clicked or tapped somewhere on your page. Before that, the greeting appears without sound. ## Where your chat can appear Anyone who copies your code could put your assistant on their own website and use your replies. To stop this, list the websites allowed to show it under **Where it can appear**, up to 20. It then answers only on those. * Each website you list also covers its other parts, like `www.yourbusiness.com` or `shop.yourbusiness.com` for `yourbusiness.com`. * Leave the list empty to allow any website. * Your chat page always works, even with no website. > [!NOTE] > > This list isn't what your assistant learns from. That's your website under > [Knowledge](https://docs.baza.chat/getting-started/teach-your-assistant.md#your-website). ## Light and dark The chat can follow your website's light or dark look on its own, or always keep one look. If your brand colour would be hard to see on the chat's background, the chat uses a colour that stands out instead. ## Customers who leave the page A customer may close the chat before your team replies. When a reply comes, the chat button plays a soft sound and shows how many new replies are waiting. This works for half an hour after the customer's last message. > [!TIP] > > On Pro you can remove the Baza branding. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.