Customer Support

Building a Chatbot: 101

In this guide, we will build a website Chatbot for an e-commerce site that sells jeans 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

To start, click the plus button beside “Lindies” to create a new Lindy.

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

Click the "Select Trigger" step on the Flow Editor.

Add the Chat Message Received trigger.

Click the “Message Received” step to customize the Greeting Message for your Chatbot.

This will be the first thing the user sees when interacting with your bot.

Conversation Starters allow the user to click a prompt and send this as a message to Lindy to start a conversation.

They appear above the text input box so the user can easily choose from the most commonly asked questions.

Now we are going to add a new trigger. Click “New Trigger” in the top left.

A Lindy can support multiple triggers which initiate the workflow.

Select New Trigger and select the Lindy Embed trigger.

Configure the Lindy Embed Trigger

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

Domain Name: This will restrict where Lindy can be embedded — if left empty, you can embed it on any domain. A domain name example could be: “openai.com”

Display Name: The name of the bot, as viewed by your users (for example “Jeans Galore Support”).

Accent Color: The color at the top of the Chatbot window.

Popup or iFrame: A popup Chatbot floats over your webpage and can be opened or minimized by users, while an iFrame Chatbot is embedded directly into the page’s content, remaining fixed in place

Logo: Appears in the top left of your Chatbot when expanded.

Icon: Appears in your Chatbot’s bubble, when collapsed.

Callout message: Appears next to your Chatbot’s bubble, prompting the user to interact with it.

Once configured, click done to save your changes!

Add a Knowledge Base Source

Once you have the Lindy Embed trigger, 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.

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.

Insert 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 via email.

The prompt used for the condition is:

The user seems angry about an order.

After this condition, add the Lindy Embed Send Message action, set the text input setting to “AI Prompt”, and insert the following prompt in the Text field:

Respond to the user politely and ask them for their name and email address.

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 Text field to instruct Lindy on how to respond, once she receives the name and email address from the angry user.

Prompt:

Thank the user and let them know the team will be reaching out to them directly to help with their request.

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, we recommend you switch to “Set Manually” and type the exact name of where you want the alert sent to.

This is because we do not need AI to infer and choose where we want the alert sent, as we 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 → 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 Text 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, retaining all previous conversation context in the process. This ensures the user’s message passes the correct Condition following each knowledge base query.

Final Step

The last step is to connect the initial “Message Received” trigger to the knowledge base step.

To do this, select the grey arrow proceeding the “Message Received” trigger, and drag it to the “Search knowledge base” step.

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

Embed Your Lindy onto 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 viewing your webpage and sending a message to Lindy, as if you were a user.

When you test Lindy as a user, you will see a grey ‘Test Mode’ indicator. This only appears because you, the owner of Lindy, are testing the Lindy Chatbot. If you access the Chatbot in Incognito, you will not see the grey ‘Test Mode’ indicator.

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 Lindies 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:

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

Setting Up A Webhook Trigger

Chat With YouTube Videos