How to Add Pippin Web Chat to Your Website

Summary

Overview: Pippin Web Chat puts a chat bubble in the corner of your website. Visitors type a question and Pippin answers live, using your knowledge. You paste one line of code into your website, then switch the chat on, set the greeting and choose how the bubble looks.

Prerequisites:

• You are signed in as the workspace Admin.
• You have at least one Lead Scoring attribute in Settings › AI Studio. The on/off switch stays disabled until you do.
• You can edit your website's HTML, or someone can do it for you.

Step-by-Step Instructions

Step 1: Copy your embed code

1. In the sidebar, go to Settings › Channels and click the Web chat tile. The Web chat card opens below the tiles.
2. Under Your embed code, click Copy. The button changes to Copied.
3. Paste the code just before the closing </body> tag of every page on your website, then publish your site.

Step 2: Set the greeting

1. In Greeting, write the first message visitors see. Say that Pippin is an AI assistant: this greeting is the disclosure the visitor reads first. You can use up to 300 characters.
2. In Show the greeting after, enter how many seconds to wait (0 to 60). Enter 0 to show the greeting only when the visitor opens the chat.

Step 3: Choose how the bubble looks (optional)

1. Click Appearance to open it. A live preview shows on the right.
2. Set any of these:
   • Corner: Bottom right or Bottom left.
   • Distance from the side and Distance from the bottom, in px (0 to 200).
   • Bubble size: Small (48px), Medium (56px) or Large (64px).
   • Bubble icon: Chat balloon, Message, Question mark or Your logo. To use your logo, upload one in Settings › Branding first.
   • Text beside the bubble (optional, up to 24 characters, shown on desktop only).
   • Colour: keep Use Brand colour ticked, or untick it and pick a colour.
3. You don't need to paste new code after changing the look. Your website picks up the change after you save.

Step 4: Save and switch the chat on

1. Click Save changes. Always save your edits before you use the switch.
2. Turn on the switch at the top of the card. It saves right away. The card's status changes from Off to Live, and the Web chat tile shows Connected.

Step 5: Preview it

1. Click Preview on a demo page. A demo page opens in a new tab with your chat bubble on it.
2. Open the bubble and ask a question to see how Pippin answers.

Verify It Worked

Success criteria:

• The Web chat card shows Live, and the Web chat tile shows Connected.
• The chat bubble appears on your website, and the greeting shows after the delay you set.
• When a visitor sends a message, a new lead appears in the Inbox. Just opening the bubble doesn't create a lead.

Troubleshooting

Common errors

• "A greeting is required.": the greeting is empty. Fix: write a greeting, then click Save changes.
• A red error appears under Save changes: your settings didn't save. Fix: check the message, correct the field it names, and click Save changes again.
• The tile shows Set up lead scoring first and the switch is greyed out with Configure Lead Scoring first before switching on a channel.: add a Lead Scoring attribute in Settings › AI Studio first.
• Save changes is greyed out: nothing has changed yet, or the greeting is empty or longer than 300 characters.
• The bubble doesn't appear on your site: check that the switch is on, the code is on the page, and your website is on the allowed list if you set one. A site that isn't allowed sees "This chat widget is not enabled for this website."
• Your logo — none uploaded yet can't be picked: upload a logo in Settings › Branding first.

Limitations & considerations

• Web chat replies always send right away. They don't wait in the Review Queue, even with the Review every reply automation level.
• If no websites are listed, anyone who copies your embed code can run your chat on their own site. Limit it to your websites.
• If you rotate the key, the code on your website stops working until you paste the new code.

Next Steps & Related Resources

• Next steps:
  • How to Limit Web Chat to Your Websites and Rotate the Key
  • How to Set Web Chat Quick Questions
• Related articles:
  • How Web Chat Suggests Quick Questions
  • How Pippin Saves a Visitor's Phone Number
  • How to Set Up Your Brand Identity
  • How to Set Up Lead Scoring

Need more help? For more information and assistance, please send an email to support@pippify.ai.

Last Updated: 10/15/2026