# Set up the chat widget

The chat widget is a chat button that sits on your website. A customer clicks it, asks a question, and gets an answer from Rin or your team. Customers don't need a Rinhelp account.

## Add it to your website

An owner does this under **Settings > Chat widget**.

1. Find **Add it to your website** and copy the code. It is one line and looks like this, with your own workspace in place of the example:

   ```html
   <script src="https://widget.rinhelp.com/widget.js?workspace=YOUR_WORKSPACE" async></script>
   ```

2. Paste it into every page of your website where customers should see the chat button.
3. Open one of those pages in your browser. The chat button appears in a corner.

Once the chat widget has loaded on your website, the **Install the chat widget on your website** step under **Get started** is ticked off.

## Choose where it can appear

The chat widget only works on websites you list. Under **Settings > Chat widget**, fill in **Websites where the chat widget can appear (one per line)**. The website you gave when you created your workspace is already there.

List every address your pages use, written without a path, such as `www.example.com`. `www.example.com` and `example.com` count as different websites, so add both if both are in use. If the chat widget doesn't show up, this list is the first place to look.

## Change how it looks

All of these are on **Settings > Chat widget**. Click **Save** after changing **Look and feel**.

- **Color**: the color of the chat button and the panel.
- **Position**: **Bottom right** or **Bottom left**.
- **Greeting**: the first message customers see, up to 280 characters. Say what they can ask about.
- **Show the greeting above the launcher**: on by default. About 6 seconds after a customer arrives, your greeting appears above the chat button, once per visit. It doesn't appear while the button shows new replies. Clicking it opens a new conversation that starts with the same line. When Rin can't start new conversations, it comes from your team instead: "Hi, how can we help? The team will reply here."
- **Image**: a PNG, JPEG or WebP image up to 2 MB, shown at the top of the chat panel. Choose a new file to replace the old one, or click **Remove** to go without one. Your help center uses the same image and color.

## What your customers see

- Clicking the chat button opens a window with your workspace's image and name at the top, and the faces of Rin and up to three teammates who answer. On a phone it fills the screen.
- **Home** shows a reply the customer hasn't read yet, **Ask a question**, and a search with the first three articles of your help center under it.
- The window takes your color for the top of **Home**, the customer's messages, the send button, your teammates' initials and the open tab. On a light color, text on it turns dark so it stays readable.
- Three tabs sit at the bottom: **Home**, **Messages** and **Help**. **Help** shows once you publish an article. See [Write your help center](/articles/d53429cc-f939-4469-b08e-cfdf56434e75).
- **Help** lists your sections in the order you set, each with its number of articles, then the articles that aren't in a section. A customer opens a section to see its articles, and an article to read it, with **Open full page** to see it on your help center. Searching finds articles by their title and text and marks the matching words. While Rin can answer, **Ask Rin** above the results starts a conversation with what the customer searched for.
- An article ends with **Still stuck? Ask Rin**, which starts a conversation from that article: Rin reads it first, and the conversation says "Started from" with the article's title, for the customer and at the top of the conversation in your inbox. When Rin can't start new conversations, it says **Still stuck? Send us a message** instead, and only your team sees the "Started from" line. If you delete the article, the line goes.
- **Messages** lists every conversation the customer has, newest first. Each row shows the customer's first message as its title, the latest message ("Rin: …", "Maya: …" or "You: …"), and a status in words: **Rin is answering**, **Answered**, **Waiting for the team**, **Maya replied** or **Closed**. A dot and a count on the tab mark replies the customer hasn't read yet. **Ask a question** starts a new conversation.
- A customer's first question starts a conversation. Rin answers it when it can, with links to the pages it used. See [How Rin answers](/articles/e3696d2f-b77d-4324-8ae0-ef0e0e92235e).
- At the top of a conversation, the customer sees who is answering: Rin, or the teammate the conversation is with and your workspace name.
- When a teammate takes over, the window says "Maya joined the chat", with the teammate's name.
- Once a conversation is with your team, the window asks for an email address: **Get replies by email if you leave**. When a customer leaves the chat widget, replies reach them by email instead. See [Set up email](/articles/35313324-fda8-4bf4-b58c-945b36cb1744).
- When Rin can't start new conversations, because you haven't added a source or it has run out of messages, the chat button shows a person's chat bubble, your team's faces replace Rin's, and new conversations go straight to your team. See [Plans and billing](/articles/66554130-03d5-4712-82f8-e83b1690c663).
- On the same browser, a customer's conversations are still there next time.
- Replies from a teammate show that teammate's name. Replies from a teammate's AI agent show the teammate's name too.
- **Powered by Rinhelp** shows on the home tab and in conversations unless you remove it. See [Plans and billing](/articles/66554130-03d5-4712-82f8-e83b1690c663).

To see how Rin would answer before a customer does, use **Test Rin** at the bottom of the same page. See [How Rin answers](/articles/e3696d2f-b77d-4324-8ae0-ef0e0e92235e).

## Open it from your own buttons

Your website's own buttons, like **Contact us** or **Talk to sales**, can open the chat widget. This takes a developer.

- `Rinhelp('open')` opens the chat widget, the same as clicking the chat button.
- `Rinhelp('open', { team: true })` opens a new conversation that goes straight to your team. Rin doesn't answer it, even when it could, so it uses none of your AI replies. The customer sees your team's greeting: "Hi, how can we help? The team will reply here." After their first message, the window asks for their email so replies can reach them if they leave.

Add this once on every page, then call `Rinhelp` from your buttons:

```html
<script>
  window.Rinhelp =
    window.Rinhelp ||
    function () {
      ;(Rinhelp.q = Rinhelp.q || []).push(arguments)
    }
</script>
<button onclick="Rinhelp('open', { team: true })">Talk to sales</button>
```

A click before the chat widget has finished loading waits and opens it once it's ready.

## Recognize signed-in customers

By default, a customer types their email if they leave before an answer arrives. If your website has its own sign-in, you can tell Rinhelp who is signed in. That customer is a signed-in customer: they never type their email, their conversations follow them across devices, and Rin can find their purchases without asking for a receipt number.

This takes a developer. An owner finds the **Identity secret** under **Settings > Chat widget**. Only your website's server should know it.

1. When someone signs in, have your server create a signed login token (an HS256 JWT) with the identity secret. It needs these fields:

   | Field                | What to put in it                                                   |
   | -------------------- | ------------------------------------------------------------------- |
   | `sub`                | The person's ID on your website, as text.                           |
   | `email`              | Their email. Rin needs it to find their Shopify orders.             |
   | `name`               | Their name.                                                         |
   | `stripe_customer_id` | Optional. Their Stripe customer ID, so Rin can find their payments. |
   | `exp`                | When the token expires, at most one hour from now.                  |

   In Node.js with the `jsonwebtoken` package:

   ```js
   const token = jwt.sign(
     { sub: String(user.id), email: user.email, name: user.name },
     process.env.RINHELP_IDENTITY_SECRET,
     { algorithm: 'HS256', expiresIn: '1h' },
   )
   ```

2. On every page while they are signed in, pass the token to the chat widget:

   ```html
   <script>
     window.Rinhelp =
       window.Rinhelp ||
       function () {
         ;(Rinhelp.q = Rinhelp.q || []).push(arguments)
       }
     Rinhelp('identify', { token: 'the token from your server' })
   </script>
   ```

3. When they sign out, call `Rinhelp('reset')`.

Each `identify` call keeps the customer signed in to the chat widget for 12 hours. If you choose **Regenerate** next to the identity secret, the old secret stops working at once, so update your server right away.