How to build dynamic web experiences with Conversational Agents

If you have a website, it’s table stakes to build engaging experiences that are effective at retaining existing customers, and attracting new ones. Users want tailored content, but traditional website development tools struggle to keep up with the demand for dynamic, individualized journeys. With Google Gemini and Conversational Agents (Dialogflow CX), you can now build websites that dynamically adapt their content based on what your users are looking for. 

In this blog post, you will learn how to:

1. Create dynamic web pages that respond to user’s intents using Conversational Agents

2. Use function tools to bridge the gap between conversation intent and web content display

What is a Conversational Agents function tool?

A Conversational Agent function tool is a feature that allows your chatbot to interact with external systems and trigger actions based on user conversations. In this article, we use it to:

1. Detect user intents from natural language input
2. Map those intents to specific function tool
3. Dynamically update the UI based on the conversation flow

Let’s take an example: Retail chatbot

While everyone can benefit from these features, retailers in particular can benefit from building dynamic web pages with Conversational Agents. We'll use a retail chatbot use case to demonstrate this tool. Here’s the workflow:

Step 1: Create a function tool

Set up a new Playbook function tool called Load-Swag-Content with the following input/output schemas in YAML format.

Your console should look something like this:

Step 2: Set up a playbook steering agent

Set up a main steering playbook to call the function tool Load-Swag-Content.

Step 3: Create examples to drive Playbook agent behavior. 

In this example, when a user asks about “Backpack”, the Playbook agent will call the function tool by passing a backpack related URL as an argument to the web client.

More information on the web client in the next step.

Step 4: Write web client JavaScript function

This client-side Javascript function receives the URL from the Load-Swag-Content function tool and updates the HTML iframe accordingly.

We are using HTML iframe to demonstrate the function calling and parameter passing capabilities. The same concept works across different web frameworks and applications, and developers can be as creative as they want to build custom logic.

Step 5: Register the function tool

Register the Playbook function tool using registerClientSideFunction, which will map the Load-Swag-Content tool with the JavaScript function loadURL.

You can get the toolId from the browser URL bar at the Playbook function tool page.

Step 6: Integrate Dialogflow messenger

Finally, embed the Dialogflow messenger integration with your web client.

Sample front end source code

This is a front end sample code. You need to update configuration such as YOUR_REGION, YOUR_PROJECT_ID, YOUR_AGENT_ID, YOUR_TOOL_ID, and custom JavaScript function.

Demo web page

Let's look at a demo use case for a virtual swag assistant. The customer is greeted at the start of the chat.

When the customer wants to find out more about a Fleece Jacket, the page is dynamically updated to display relevant information.

Next steps

To learn more about Conversational Agent Function tools, check out the following resources and enhance your customer experience with real-time intent-based dynamic web pages.

• Get started with Conversational Agent by following the tutorial here

• Function Tool Documentation

• Conversational Agents best practices