How Conversational Agents Can Help Create Dynamic Web Sites

How to use conversational agents to create dynamic online experiences

Building captivating experiences that work to draw in new clients and keep hold of current ones is crucial if you operate a website. Consumers desire personalised content, but the need for dynamic, customised journeys is too great for standard website building techniques to meet. With Google Gemini and Conversational Agents (Dialogflow CX), you can now create websites that dynamically change their content according to what your viewers are searching for.

This blog post will teach you how to:

• Use conversational agents to create dynamic webpages that react to user intents.
• Utilise function tools to close the gap between the display of site information and conversation purpose.

What is a Conversational Agents function tool?

Your chatbot can communicate with external systems and take action in response to user chats by utilising a Conversational Agent function tool. This article makes use of it for:

• Determine user intents from input in natural language
• Connect such intentions to a certain function tool.
• Adapt the user interface dynamically to the discussion flow.

Let’s look at an illustration: Chatbot for retail

Although these characteristics are advantageous to all users, retailers stand to gain the most from using Conversational Agents to create dynamic websites. To illustrate this technology, we’ll look at a retail chatbot use case. The workflow is as follows:

Make a function tool

Create a new Playbook function tool named Load-Swag-Content and configure it using the YAML input/output schemas listed below.

#Input format

properties:
url:
type: string
description: the URL for the Swag
required:

url
type: object

#Output format

null

Configure a playbook steering agent

Create a playbook for the primary steering to invoke the function tool Load-Swag-Content.

Provide examples to motivate the behavior of Playbook agents.

In this example, the Playbook agent will invoke the function tool by providing the web client with a backpack-related URL as an input when a user enquires about “Backpack.”

The following step has more details about the web client.

Create a JavaScript function for the web client

The HTML iframe is updated by this client-side Javascript function, which gets the URL from the Load-Swag-Content function tool.

function loadURL(url) {
console.log(“URL received: ” + url.url);
document.getElementById(‘myIframe’).src = url.url;
}

To illustrate the function calling and parameter passing features, we are utilising HTML iframe. The same idea applies to other web frameworks and applications, and developers are free to use their imagination when creating unique logic.

Register the function tool

Registering the Playbook function tool with registerClientSideFunction will link the JavaScript function loadURL to the Load-Swag-Content tool.

const toolId = “YOUR_TOOL_ID”

const dfMessenger = document.querySelector(‘df-messenger’);

dfMessenger.registerClientSideFunction(toolId, “Load-Swag-Content”, loadURL)

The toolId can be obtained from the Playbook function tool page’s browser URL bar.

Integrate Dialogflow Messenger

Lastly, integrate the Dialogflow messenger into your web client.

Front-end source code example

This is an example of front-end code. Configuration elements like YOUR_REGION, YOUR_PROJECT_ID, YOUR_AGENT_ID, YOUR_TOOL_ID, and custom JavaScript functions need to be updated.

Documentation for Conversational Agents (Dialogflow CX)

A novel platform for natural language comprehension called Conversational Agents (Dialogflow CX) is based on generative models that can regulate conversations and on flows that may be used to govern talks more explicitly.

Designing and integrating a conversational user interface into your mobile application, online application, device, bot, interactive voice response system, and other applications is made simple with Conversational Agents (Dialogflow CX). Users can engage with your product in new and interesting ways by using Conversational Agents (Dialogflow CX).

Your clients’ text or audio inputs (such as from a phone or voice recording) can be analysed by Conversational Agents (Dialogflow CX). Additionally, it has two options for responding to your customers: text or artificial speech.

A $600 credit for a complimentary trial of Conversational Agents (Dialogflow CX) will be given to each new client.

Plan for console consolidation and renaming

Some product names, feature names, and console names will change between late 2024 and early 2025:

• Conversational Agents will be the new moniker for Dialogflow CX.
• Conversational Messenger will be the new name for Dialogflow CX Messenger.
• Conversational Phone Gateway will be the new name for Dialogflow CX Phone Gateway.
• Playbooks will be the new moniker for Vertex AI Agents.
• One Conversational Agents console will replace the Vertex AI Agents and Dialogflow CX consoles. Until the new consolidated console is made generally accessible (GA), the Dialogflow CX console will continue to be supported. Users won’t need to do anything; agents established with the Vertex AI Agents console or the Dialogflow CX console will be immediately moved to the new unified console.