How would you like to build your own AI Chatbot without writing a single line of code?
With Zapierâs Interfaces tool, you can get a fully functional chatbot up and running in a matter of minutes.Â
In this post, weâll walk you through the process of building and configuring an AI Chatbot in Zapier step by step.Â
Unlocking new possibilities with Zapier Interfaces
Until recently, it wouldnât have been possible to create a chatbot like this with Zapier. But now with their new Interfaces feature, Zapier is evolving from an automation provider to a full-stack application development platform.Â
There are some serious technical limitations with this Zapier chatbot, as many of the underlying features are still in beta, but it will only get better and more functional from here.Â
How it works
Building a no-code Chatbot in a Zapier interface is very simple and only takes a few minutes.Â
Weâll give you a quick overview of how it works now, then weâll walk you through the whole process with a detailed step-by-step guide. Â
â
⢠First, youâll create a new interface in Zapier.Â
⢠Then, add a Chatbot component to one of the interfaceâs pages.Â
⢠Configure your Chatbotâs settings to your liking by providing a title, a directive, and other useful options.Â
⢠Open up your live page to test out your Chatbot.Â
⢠Once everything is all set, copy the link to share it with anyone on the web.Â
â
Now, letâs take a closer look at each of these steps.Â
â
Getting Started with Interfaces in Zapier
As weâve already alluded to, building an AI Chatbot in Zapier will lean heavily on Zapierâs recently added Interfaces.
So what is an interface in Zapier?
An Interface creates a simple UI where users can interact with several Zapier automations or other tools that youâve built through a web page.Â
â
You can add chatbots, forms, links, and other components to your Zapier interfaces.Â
â
â
Interfaces are a great option if youâve been looking for a simple way to package and share your Zapier automations with coworkers. Theyâre especially useful if you're not already using an app like Airtable that can offer similar features.Â
â
The core features of interfaces are accessible with any Zapier account. However, some features will require a premium interfaces plan, which is in addition to your main Zapier subscription.Â
â
â
For instance, if you want to use custom URLs and remove Zapier branding for your interfaces, or even have your chatbot provide longer responses, youâll need a premium plan. That said, everything we cover today can be done with a free interfaces plan, so you can explore these new features without having to spend anything upfront.Â
Creating an Interface for your Chatbot
To get started with making a custom AI chatbot in a Zapier interface, log in to Zapier, and select âInterfacesâ in the menu on the left.Â
â
â
Create a new Interface, and choose âStart from Scratchâ.Â
â
â
â
The interface will start with a blank page simply titled âPageâ.
â
Interfaces, pages, and componentsÂ
Just to clarify some of the structure and terminology used here, an interface consists of one or more pages. Every page will have its own URL, and can hold several components, such as a chatbot, a form, or a table.Â
â
To start creating your chatbot, add a new component to your first page, and scroll down to âChatbotâ.Â
â
â
When you select Chatbot, youâll get this pop-up warning you that the Chatbot component is an experimental feature thatâs subject to change.Â
â
â
Thatâs fine; just keep in mind that any interface you build with a chatbot may change as Zapier updates the beta features. Click on âYesâ to continue.Â
Configuring your chatbot
Now, youâll see a new chatbot component configured with Zapierâs default settings.On the right, youâll have a panel where you can customize our Chatbotâs functionality and display settings.Â
â
â
For our example, weâre going to configure this Chatbot to be an automation brainstorming tool. When a user gives it the names of a few apps, the Chatbot should provide a list of ways to automate those apps with no-code tools like Zapier.Â
â
Setting the chatbotâs name, directive, and greeting
â
First, you can set a name for your Chatbot. Weâll call ours âAutomation Brainstormerâ.Â
â
â
Next, letâs skip ahead to one of the most important parts of the Chatbot: the directive. The directive is where we can tell the Chatbot what to do. We can tell it what kind of answers it should give, the tone it should use, and the overall identity that it should assume.Â
In general, the more detail you can provide in your directive, the better the Chatbot will perform to your specifications. Filling out the directive right away will make it easier to configure your other settings and test your Chatbot as you continue building your page.Â
â
Hereâs a directive weâve already written up for our Chatbot:Â
â
âYou are a workflow automation ideas bot. You help knowledge workers to brainstorm ways that they can automate their work to create time, produce more reliable results, and become more confident in their day-to-day work. When users give you a list of two more app names, such as âHubspot and Slackâ, you suggest a list of 5-10 ways that they could automate those applications using no-code tools like Zapier.
You also suggest ways they might build automations using native automation features in those applications.Â
Your suggestions are focused on professional use cases.Â
You provide your suggestions with a friendly and helpful tone.â
â
If youâd like to use that directive as a starting point for your own Chatbot, just copy and paste it into your configuration menu.Â
â
Next, you can choose a default greeting for your chatbot to use. You can either provide a static greeting that will be used every time, or you can open up this dropdown and select âGeneratedâ to use an AI-generated greeting instead.Â
â
â
Hereâs a good example of why you should fill out the directive early on. With the directive already provided, you can ask the Chatbot to describe what it does, and it can actually give an answer based on its directive.Â
For instance, weâll have our chatbot greet users based on the prompt âGreet the user and describe what you can do.â
â
â
Letâs take a peek at our live page to see what that looks like. If you want to look at your live page at any time, just click on the pageâs URL in the top left.Â
â
â
As soon as we open the page, the chatbot greets us exactly as we asked it to. It describes what it is and what it can do, and tells us to list some apps to get started.Â
â
â
And if we refresh the page, we get a similar but slightly different response.Â
â
â
Using a generated greeting can help to easily add a little more personality and detail, but it does run the risk of being a bit inconsistent. Just choose whichever you think is more appropriate for your use case.Â
In our example, weâll stick with the generated greeting; we want to show off what the chatbot can do right from the get-go.Â
Now letâs go back to the interface editor.Â
Setting placeholder texts, language models, and your botâs temperature
To resume editing any component, like your chatbot-in-progress, just hover over the component and click âEditâ.Â
â
â
The next setting we need to configure is the âprompt placeholderâ. This is just the static placeholder text that the user will see before they start typing a prompt.Â
You can enter whatever youâd like here. For our automation brainstormer bot, we'll just add a message that says: âList two or more apps to get some automation ideas.â
â
â
Weâve already entered a directive, so next letâs look at âModelâ.Â
If you subscribe to the âInterfaces Premiumâ plan, youâll be able to choose from different language models for your Chatbot to use. On the free plan, youâll have to stick with OpenAI GPT3.5.Â
â
â
Upgrading to the premium plan will also let you increase the max response length. On the free plan, youâre limited to responses of 2048 tokens, which is equivalent to about 1,500 words.Â
â
Next, youâll see a slider that lets you control the âcreativityâ of your chatbot. This setting is also often called the modelâs âtemperatureâ in other AI tools.Â
The higher the number, the more creative the bot will try to be in its answers. That also means that youâre more likely to see hallucinations, or instances where the chatbot provides factually incorrect answers.Â
â
Ultimately, if you want to build a Chatbot thatâs more likely to provide reliable, factual answers, you should really set the temperature or âcreativityâ to 0. But whenever youâre dealing with a Chatbot, hallucinations are always a possibility.Â
Since this bot is all about brainstorming, and weâre mostly just demonstrating the setup, itâs OK if it comes up with some ideas that arenât totally accurate, so weâll leave it at the default of 0.7 for now.Â
â
Adding a disclosure message and editing your botâs layout
Next, thereâs a simple toggle that lets you choose whether or not to display a disclosure message. Zapier provides a default disclosure, which you can edit if youâd like.Â
When you toggle it on, the chatbot will include this disclosure message at the bottom of every message it sends.Â
â
â
If you want to be absolutely sure that your users know theyâre interacting with an AI bot, including the disclosure is a good way to go.Â
â
The last options in this âContentâ tab are just a couple of settings to control the visual layout of the Chatbot component. With these options, you can change the width and alignment of your chatbot.Â
â
Building a chatbot with specific data sources
Youâre nearly finished configuring your chatbot. Letâs just take a quick look at the other tabs in your interface. Â
Under âDataâ, youâll just see a âComing soonâ message (note: this will likely be updated after this blogâs original publishing date of 06/21/23).Â
â
â
This feature isnât finished yet, but at some point, you should be able to provide data that your Chatbot can use to inform its answers.Â
This will help your chatbot to give more specific answers about your company or your product without having to write an extremely long, detailed directive.Â
â
A current leader in chatbot storage is called Pinecone - but youâll need to build a non-Zapier chatbot to leverage Pinecone. Chatbase.co might also be worth a look if youâre looking to create a Chatbot with an external data source right now.Â
â
Alternatively, you can reach out to XRay if youâd like to build a chatbot for your company using custom data like your blogs, about us pages and more. We could even help you to build a bot for internal company use that leverages specific portions of your companyâs data to assist your team in financial planning, project management, and more.Â
â
Embed your chatbot and add automated actions
Under âEmbedâ, you can grab the HTML embed code for your page, but only if you have a premium interfaces subscription.
â
â
Finally, under âActionsâ, you can connect your chatbot to some automated actions. For now, all of the actions have to be triggered with a button, and there are only two choices.Â
â
â
You can configure the button to copy the text of the Chatbotâs message, or have it launch a Zap.Â
â
â
For instance, you might want to build a Zap that will let the user send the Chatbotâs response to a Slack channel with a single click.Â
â
For our automation brainstormer, weâll just add a âCopy Messageâ button to our chatbot.Â
To add a âcopy message actionâ, just add an action and provide some text for the button and notification.Â
â
â
Then, click âCreate actionâ to add it to your chatbot.Â
Test and share your chatbot
Now, youâre all set to test our Chatbot on the live page. Click on the URL to open up your page.Â
â
â
In our example, our Automation Brainstormer Chatbot immediately introduces itself with a generated message.Â
â
â
Weâll ask it how to automate Pipedrive, Shopify, and Microsoft Teams.
â
â
In just a matter of seconds, it comes up with a list of 8 ideas for automating these apps.Â
â
â
Letâs see how it handles a follow-up question. Weâll ask for more information about Automation #1.Â
â
â
Now, it provides a more detailed set of instructions for building the first automation it described. Not bad. Weâll click on the âCopy message textâ button that we added to save that answer for later.Â
â
Explore automation possibilities on XRay.Tools
If youâd like to try out a real automation brainstorming chatbot, just go to XRay.Tools and search for the apps youâd like to use.Â
Select any app to view a detailed list of its available triggers, actions, and searches on Zapier and other platforms. On that page, you can also ask a dedicated chatbot for more information about the appâs capabilities, and API documents.
Build a simple no-code chatbot in Zapier
Building a no-code AI chatbot with Zapier Interfaces is a fast and easy way to leverage a helpful AI assistant for your team. It only takes a few minutes to get started, so try it out today.Â
Just bear in mind that weâre working with a lot of experimental and beta features here! Youâll probably see lots of updates to these tools over the next few months, so be ready to adapt.Â
If youâd like to learn more about no-code automation and AI tools, check out our blog or our YouTube channel. You can also follow XRay on Twitter, Facebook, or LinkedIn.
â