Customize Your Chatbot For Your Website

Select the “Lindy Embed” trigger in the flow editor. Click Configure Embed Settings.
Lindy Embed trigger in flow editor with Configure Embed Settings button highlighted
You’ll see several options to customize your chatbot: Domain Name: Restrict where your Lindy can be embedded. Leave it empty to use on any domain, or enter a specific domain like “yourcompany.com”. Display Name: Set the name of your bot as it will appear to users. For example, “Technical Interview Assistant” or “Customer Survey Bot”. Accent Color: Choose a color that matches your brand for the top of the chatbot window. Popup or iFrame: Decide between a floating popup chatbot or a fixed iFrame embedded directly in your page. Logo: Upload your company or project logo to appear in the top left of the expanded chatbot. Icon: Select an icon for your chatbot’s collapsed bubble. Greeting Message: The introductory message the user sees when they start a chat. Conversation Starters: Customize messages next to your bot to prompt engagement. Callout message: Create a prompt to encourage users to interact with your chatbot.

Access The Popup Code Snippet

Select the “Lindy Embed” trigger in the flow editor. Click Configure Embed Settings. Ensure you have the popup tab selected and copy the “Code Snippet” to your clipboard.
Embed settings showing the code snippet to copy for website integration
Paste the code snippet into your website’s header. We offer instructions on how to do so for the most popular platforms:

Webflow

  1. Access your Site Settings.
  2. Navigate to “Custom Code”.
  3. Paste the Code Snippet at the bottom of your “Head Code” section.
  4. Publish your changes!

Wix

  1. Choose the site you want to embed Lindy on and click Settings.
  2. Scroll down until you see Custom Code.
  3. You will see an option in the top right corner to Add Custom Code.
  4. Click this and paste your Lindy Code Snippet here.
  5. Click Apply.

Squarespace

  1. Access your Site Settings then click Advanced.
  2. Select Code Injection.
  3. Paste your Lindy Code Snippet into the Header section.
  4. Remember to Save and Publish your changes.

WordPress

  1. Install and activate the free Insert Headers and Footers plugin by WPCode.
  2. In your WordPress dashboard, navigate to Code Snippets → Header & Footer.
  3. Paste the Lindy Code Snippet into the Header box.
  4. Click Save Changes.

Embedding Lindy as an iFrame

You can also embed Lindy as an iFrame. On the Configure Embed Settings modal, select the iFrame tab and copy the code snippet to your clipboard. You can then paste this code anywhere your website builder accepts iFrames.
When embedding Lindy as an iFrame, it is important to set the height on the element containing the Embed iFrame. You can also change the height property of the iFrame itself to a specific pixel value (e.g., 100px, 500px) instead of using “100%”.
When using iFrame embedding, ensure your container element has a defined height. The iFrame will inherit the height of its container, so setting this correctly is crucial for proper display.

Testing Your Embed

Before deploying your Lindy Embed to production, it’s essential to test the chatbot functionality and user experience.
Lindy Embed testing interface showing the preview and test conversation options [[memory:2619471]]
After sending a test message, return to the test panel and click the incoming message to continue the conversation.
Lindy Embed testing interface showing the incoming message to select

Preview Your Chatbot

Use the “Click here to preview your Lindy Embed and start a test conversation” link in the configuration panel to test your chatbot in a realistic environment. This allows you to:
  • Verify the visual appearance matches your brand
  • Test conversation flows and responses
  • Check knowledge base integration
  • Validate escalation workflows

Monitor Chatbot Conversations

Lindy Embed chatbot flow monitoring showing conversation logs and user interactions [[memory:2619471]]
Track user interactions and monitor conversation quality through the flow view. This helps you:
  • Analyze user questions and interaction patterns
  • Identify knowledge gaps or areas for improvement
  • Monitor escalation triggers and response quality
  • Optimize conversation starters and greeting messages

Best Practices

  • Test on Multiple Devices: Ensure your embed works well on desktop, tablet, and mobile
  • Match Your Brand: Use your brand colors and logo for a cohesive experience
  • Clear Purpose: Make the chatbot’s purpose obvious through the display name and greeting
  • Domain Security: Always specify allowed domains for production sites
  • Performance: Monitor loading times and optimize as needed

Troubleshooting

Next Steps