Customer Support

Building a Chatbot: 101

In this guide, we are going to build a website chatbot for an e-commerce site, in less than 5 minutes, using Lindy Embed.

‍Introduction to Lindy Embed

Lindy Embed allows you to build a custom chatbot that can be published to your website, or shared through a public link.

A few important things to note:

Users don’t need a Lindy account to use your Lindy Chatbot.

You can see users’ conversations with Lindy in your task view.

You can set up your Lindy Chatbot such that it “loops you in” at any point, depending on your settings.

Building a Chatbot

In this guide, we are going to build a website chatbot for an e-commerce site that sells jeans.

Click New Lindy below Home in the top left of your workspace to begin building your Lindy.

Click "Start from scratch" to create a new Lindy.

Add a Trigger

Click “Select Trigger”, then add the Lindy Embed trigger.

Configure the Lindy Embed Trigger

This is where you will customize your Chatbot and access the code snippet to embed on your page.

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 participants. 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 participants to interact with your chatbot.

Once customized, click “Done” to save your changes!

Building Your Chatbot

Once you have the Lindy Embed trigger set up, you can give data to your Lindy and define how you want her to respond.

Select the “Search Knowledge Base” step to begin uploading content to your chatbot’s knowledge base.

Select your preferred database sources — you can add more than one. Each database will automatically refresh every 24 hours, excluding Files and Text sources, which are manually added.

When in doubt, add your company website to the “Website” option or add plain text to the “Text” option.

In this example, we inserted 5 FAQs for Lindy to reference as a knowledge base via the “Text” option.

‍

Click “Add” and then “Save” to save the text input.

Add a Human in the Loop

If you want Lindy to check in with you before responding, create a condition with the requirements for when Lindy should respond versus notify you.

In this example, we are going to have Lindy determine if the user is angry and have her ask for their email address, then alert us via Slack to follow up with the user directly.

The prompt used for the condition is: The user seems angry about an order

After this condition, click “Add step”, then “Perform an action”.

Select the recommended Lindy Embed, then select the Lindy Embed Send Message.

For the “Message” field, switch the input setting to “Prompt AI” mode and add a prompt to customize the way your Chatbot responds.

Example prompt:

Respond to the user politely and let them know a team member will be reaching out shortly. Always ask for their email address if you do not have it already.

Under the Lindy Embed Send Message action, below the “After reply received” arrow, click the plus sign to add a step, select “Perform an action”, and select Lindy Embed Send Message.

Add the following prompt to the “Message” field to instruct Lindy on how to respond, once she receives the email address from the angry user.

Example prompt:

Thank the user, and let them know a ticket has been created and the team will follow-up by email.

Create a Slack Alert

Because we do not need Lindy to wait for a response from the user after she sends this message, we are going to add the Slack alert under the “After message sent” arrow of the first Lindy Embed Send Message action. To do so, click the plus sign to add a step, click Perform an action, and select the Slack Send Channel Message (or Direct Message if you prefer Lindy to DM one user).

In the “Channel” field, switch the input setting “Set Manually” and type the exact channel name of where you want the alert sent.

We recommend the “Set Manually” mode for this field because we do not need AI to infer and choose where we want the Slack alert sent, as you likely have a specific channel or user where it should be sent each time.

In the “Message” field, add a prompt to tell Lindy how she should structure the alert message.

Example prompt:

Alert the user that the support thread requires action.

Send the entire transcript verbatim.

Include the customer’s email address that was given.

Chatbot Responses

Now let’s configure Lindy’s response to all other user messages.

Click the plus button below the Condition. Click “Perform an action” and select Lindy Embed under Recommended, then Lindy Embed Send Message.

Add a prompt to the second Condition to instruct Lindy when she should respond to all other user messages.

In this example, we want Lindy to respond to all user messages aside from ones that require a human in the hoop, so the prompt is: the user does not seem angry about an order

Customize Lindy’s responses in the “Message” field of the Lindy Embed Send Message action.

Lindy will use this prompt, in combination with the context found in her knowledge base, to respond to user questions.

Example Prompt:

You are a very professional, competent support agent. You receive inquiries from new and existing customers via a chatbot on the user's website. You reply to them to the best of your ability.

Only respond with info from your knowledge base.

Use your best judgment to determine the appropriate response length. Some questions only require 1-sentence answers. Generally, responses should not be more than 150 words.

Example responses should be structured like so (using content from the knowledge base): 

"Hi {FIRSTNAME}, happy to help! You can track your order by clicking on the “Track Order” link in the confirmation email or by logging into your account and selecting “Order History.”"

Follow Up Responses

When a user responds to a Lindy Embed message, the workflow will be brought back to the first Lindy Embed step and proceed to check the knowledge base.

All of the conversation context will be passed, meaning Lindy will update the knowledge base query for each follow-up message and ensure the user’s message passes the correct Condition following the knowledge base query.

The final flow of your Lindy Chatbot will look like this:

Deploying Your Chatbot

There are three ways a user can interact with your Chatbot.

A public link (no website required)
A popup chatbot
An iFrame

Creating A Public URL

To send Lindy as a public link, click the Lindy Embed Message Received trigger.

Click the Configure Embed Settings button on the right panel.

Under the “Accent Color” section, select iFrame.

Copy the URL between in the iFrame Code Snippet:

Example:

Link:

https://chat.lindy.ai/embedded/lindyEmbed/1773cb20-15f5-42e9-a196-ea99f9030c07

You can now share this link with users!

Embed Lindy On Your Website

You can embed Lindy onto your website as a Popup or an iFrame.

To do so:

Select the Lindy Embed trigger in the flow editor
Click Configure Embed Settings
Copy the Code Snippet to your clipboard

Then, paste the code snippet into your website's header.

We offer guides on how to do so for the most popular platforms:

Webflow
Squarespace
Wix
WordPress

Test

Once your chatbot is live, you can test it by navigating to your webpage with your embedded Lindy or via the public URL of the Lindy. To test, send a message to Lindy, as if you were a user.

You can view Lindy’s execution history in the Task View of your Lindy Chatbot.

Passing URL Parameters

Chatbots often need more context about the user, such as their name or email. To do this, you can use URL Parameters or the Lindy Embed Window SDK.

Note: This only applies to Lindy’s that are embedded as a popup, not an iFrame.

URL Parameters

Lindy can access the entire URL of the page it’s embedded on, including URL parameters — even as users navigate between pages.

You can include any data in this URL you wish for Lindy to reference.

Example: To personalize greetings, add URL parameters with the user’s name and city.

Example URL: https://chat.lindy.ai/s/embedded-lindy-test-r6ba1?name=Eric&city=Toronto

In the prompt for the Lindy Embed Send Message action, make sure to reference the parameters:

Example promt:

Greet the user by their name and mention their city

As you can see, Lindy uses the parameter in her response:

Lindy Embed Window SDK

Instead of using URL parameters, your site can send information directly to the chatbot using JavaScript.

When Lindy Embed is loaded on your webpage, the Lindy Embed Window SDK becomes available for your site to interact with. It is available at window.lindyEmbed, and helps interact with the chatbot.

You can use the setUserData function to pass information about the user to the chatbot. This function takes the following parameters:

type SetUserDataInput = {

  id?: string

  name?: string

  email?: string

  additionalData?: any // This parameter will accept any type of data that you’d like to use

}

This lets us replicate the above example by invoking:

window.lindyEmbed.setUserData({

  name: “Eric”,

  additionalData: {

    city: “Toronto”

  }

}

Guides

Meeting Scheduler: 101

Getting Started With Lindy: 101