Userflow’s AI Assistant provides automated answers to your users' questions directly within your app. Powered by the latest large language models (LLMs), AI Assistant uses your knowledge base, website content, or other sources to deliver instant, accurate responses through a convenient chat interface.
The assistant eliminates wait times for users and reduces support ticket volume, allowing your team to focus on complex issues while users get immediate help for common questions.
Setting up the AI Assistant is simple: provide your website URL or integrate with common knowledge base systems, and after a short, automated training process, you'll have a fully functional AI support agent within minutes.
How the AI Assistant works
You develop an AI Assistant through the Userflow interface, similar to any other content creation. Specify the location of the source material, such as your website, knowledge base, or support center (you can include multiple sources).
Userflow subsequently trains your assistant using this data, enabling it to respond to inquiries about subjects and specific details present in your content.
The assistant is added to your resource center, enabling users to reach it via the help icon in the corner of your application (or through your custom resource center launcher, if applicable).
The assistant takes into account the chat history when responding to questions, allowing users to pose follow-up inquiries.
Set up your AI Assistant
AI Assistants are created, managed, and published in a similar manner to other Userflow content, such as flows and checklists. However, they also require a brief training step before publishing.
Step 1: Create the AI Assistant
Select AI Assistants in the sidebar.
Click Create AI assistant.
Enter a name and click the Create assistant button.
.png)
Step 2: Add sources and train the AI Assistant
Click Add source and select an option. Learn more about Web crawler and other source types below.
.png)
Click Train. Userflow will fetch all source information and train the assistant. Depending on the amount of content, it may take several seconds to minutes.
Adding multiple sources
You can also add multiple sources if you have content on different domains, such as yourdomain.com and docs.yourdomain.com.
Whenever you change the assistant settings, you must click Train to update it.
Step 3: Test the assistant
After training is complete, click Test chat and enter a search. The result should display in the test chat window. You should test follow-up questions as well.
.png)
Refine your source settings as needed. Common adjustments include:
Preventing the Web crawler from visiting certain pages. If your site has a lengthy list of irrelevant pages under a specific path, enable Control URLs to visit and enter the URL pattern under Do not store URLs matching. This will both speed up training and improve your assistant by minimizing the risk of using irrelevant information.
Filtering text from each page to store. For example, remove the header, footer, or menus. The assistant will provide better answers if the content excludes irrelevant text. Filter content using the Only include HTML matching CSS selector and Exclude HTML matching CSS selector settings. Check the x documents link and click a URL in the list to see the text stored by Userflow. Read more about this under Web crawler.
Step 4: Publish your assistant
Click Publish when you are satisfied with your test results.
The assistant is now usable but not yet visible to users. Add it to your Resource Center.
Step 5: Add the AI Assistant to your Resource Center
After you publish your AI Assistant, add it to your Resource Center to make it visible to your users.
Select Resource centers in the sidebar.
Find your resource center in the list and click it. If you don’t have one yet, either create one or see Minimal resource center solution.
Select Add block > AI Assistant.
.png)
Select your assistant from the dropdown list in the side panel and select appearance and other options. We recommend placing the AI Assistant block at the bottom of the list and using the Text input option under Appearance. This creates an eye-catching design that captures users’ attention when they open the resource center.
.png)
Click Preview to test the resource center with the assistant before publishing.
When ready, click Publish to make the assistant available for users.
Content source types
You can add multiple content sources and refinements to an AI Assistant. You can also publish more than one AI Assistant for a single site.
Web crawler
The Web crawler starts at the given Starting URL and recursively follows all links.
It will only follow links within the same path as the Starting URL. Examples: If your Starting URL is https://example.com/docs, it will read https://example.com/docs/page, https://example.com/docs/sub/page, and anything else under that path, but it will not read https://example.com/other-page since it’s not under the /docs prefix. It also won’t follow links to other domains.
To prevent the crawler from visiting certain pages, enable Control URLs to visit and add URL patterns to include or exclude. When a page is not visited, the crawler will not load it, meaning it won’t store its content or follow its links.
If you want the crawler to visit certain pages but not store them as source information, enable Control URLs to store. When a page is marked as not stored, the crawler will load it and follow its links, but not store its content. This feature is useful for following links from index-like pages without including their content. For example, on a blog, you want the crawler to visit /blog and /blog/page/:page to find all old blog posts, so you can’t use the Control URLs to visit feature.
The crawler will attempt to extract only the text bits from each page’s HTML content and transform it to Markdown, which helps the assistant understand headings, sections, code, and other formatting. It’s a good idea to remove all text that’s not the main content of the page. To do this, use the Only include HTML matching CSS selector and Exclude HTML matching CSS selector settings. Examples:
If your documentation site wraps the main content in an
<article>HTML tag, enterarticleunder Only include HTML matching CSS selector.If your website has
<header>and<footer>HTML elements on all pages containing the top and bottom menus, enterheader, footerunder Exclude HTML matching CSS selector.
After training the assistant, click the x documents link in the builder header and explore some of the URLs to ensure the text is clean and free of irrelevant content.
If your website uses JavaScript to dynamically fetch content and render it asynchronously, you may find that your pages’ content is empty. If this occurs, enable Render JavaScript. You can also enter a number of milliseconds to wait before capturing the content. Choose a duration you feel confident that your page will load within. If unsure, enter the maximum value of 10,000 (10 seconds), but note that higher values may slow down training.
If your website uses special proxies or captchas, you may not see any documents under x documents and may encounter error messages in the Training log. If this happens, try enabling Captcha/proxy work-around. If the issue persists, contact Userflow support for assistance.
Note that Userflow caches your web pages for up to one week. This speeds up retraining, as it only needs to reevaluate your URL patterns, CSS selectors, etc., without waiting for your website to respond with the full HTML. If your website content has changed, click the Clear cache and train button under the top-right three-dot menu in the builder.
Text
The Text source is beneficial for providing the assistant with information that you prefer not to display directly on your website.
For instance, during the early-access phase of our AI Assistant feature, this public guide was unavailable. However, we still wanted to offer helpful information to customers inquiring about getting an assistant of their own. To achieve this, we added the following text in a Text source:
Users can get a Userflow AI Assistant of their own by contacting us via the HUMAN live-chat. We maintain a waitlist and will extend invitations soon.
Salesforce
The Salesforce source loads your Knowledge Base articles directly via the Salesforce API. It works even if your help center requires user authentication. You can easily filter which data categories you want to include.
How to set up:
Connect to Salesforce under Settings > Integrations.
Fill in your Article URL template under Salesforce Knowledge Base settings. This is how the assistant will know how to link to your articles. Example:
https://help.mysite.com/s/article/{{ article.urlName }}. If you don’t fill this field in, articles’ content will be used for answering, but the assistant will not provide any source links.Optional: By default, we’ll use the content of your articles’ Title, Question and Answer fields from Salesforce. If you’re using a different format for your articles, you can use a custom Article content template. If your articles have a custom field called,
CustomText__c, then you can use it like this:{{ layout_items.CustomText__c }}.Salesforce will now appear under the Add source button in the assistant builder.
Zendesk
The Zendesk source loads your help center articles directly via the Zendesk API. It works even if your help center requires user authentication. You can easily filter which categories/sections you want to include.
First, connect to Zendesk under Settings > Integrations. After that, Zendesk will appear in the Add source button under the assistant builder.
Intercom
The Intercom source loads your help center articles directly via the Intercom API. It works even if your help center requires user authentication. You can easily filter which categories/sections you want to include.
First, connect to Intercom under Settings > Integrations. After that, Intercom will appear in the Add source button under the assistant builder.
Minimal resource center solution
If you are not utilizing the full resource center but wish to implement the AI Assistant in your app, you can create a new resource center containing only a single AI Assistant block.
Next, have your developers disable the default resource center launcher by adding the following line before your userflow.init() call. This will prevent the round Userflow help button from appearing in the corner of your app:
userflow.setResourceCenterLauncherHidden(true)Afterward, click Publish in the resource center builder. As the default launcher is hidden, nothing will be displayed to users.
Finally, request your developers to open the assistant chat programmatically, such as when users click a custom button in your app:
userflow.openResourceCenter()An example of an event handler on a button:
<button onclick="userflow.openResourceCenter()">
Chat with our AI Assistant
</button>In the future, we anticipate offering more options for directly embedding the assistant in your app or hosting it on a separate URL.
User ratings and feedback
Users can rate the assistant’s replies using the thumbs-up and thumbs-down icons located below each response.
Upon liking or disliking a reply, users can provide additional feedback in a free-form text field.
You can view both the ratings and the feedback on the assistant’s Analytics tab.
Analytics
This tab includes a chart displaying the number of messages, likes, and dislikes.
Additionally, it lists all the conversations the assistant has had with users. Click a conversation to view each message, including ratings and feedback messages. AI conversations can also be exported to CSV by clicking the Export button next to the conversations.
