Web widget

The web widget is a web based client that you can use in your web and mobile applications for your users to interact with your agent application using chat or voice. This guide provides an overview and basic setup instructions. You can find more details at the Web Widget GitHub documentation.

Set up the web widget

To embed the widget on your website:

  1. Click Deploy at the top of the agent builder.
  2. Click Create Channel or New channel.
  3. Select the Web widget channel type.
  4. Enter a name for your channel.
  5. Select or create an agent application version.
  6. Configure other preferences, such as the color theme and the experience type (chat, call, or mixed).
  7. Click Create channel to generate your deployment code.
  8. Add the deployment code to your website's HTML.
  9. Set up authentication for your end-users. The widget displays a warning if you use the unmodified embed code without configuring authentication. For details on options and setup, see the Configure authentication section.

Configuration options

You can customize the web widget by changing various configuration options. For a complete list, see the Web Widget Reference in GitHub.

Configure authentication

All API requests made by the web widget to Google's backend services must be authenticated. This is accomplished using a short-lived OAuth 2.0 access token.

The identity associated with this token, whether it's an end-user or a service account, must have the necessary IAM permissions to interact with the agent.

You can set up authentication in one of the following ways:

  • Token broker: Choose this to authenticate using your service account, where authentication is transparent to your end-users.
  • OAuth 2.0: Choose this to require end-users to sign in before using the agent, where the user credentials are used for access to the agent application.

Set up a token broker

A token broker is a web service that runs in your Google Cloud project and generates an access token on behalf of a service account you own. The web widget can automatically call the URL for your token broker at the beginning of a conversation to get a fresh token to use when communicating with the CX Agent Studio API.

Follow these steps:

  • Create a service account in your project and grant it the Customer Engagement Suite Client role.
  • Deploy a Cloud Run functions function with the token broker sample code we provide.

See detailed step-by-step instructions in the open source repository.

Set up OAuth2

An OAuth2 client allows the web widget to initiate an authentication flow for the end-user. This typically means a dialog window is opened, where the user logs in to their Google Account (or other providers) and the web widget receives a token to operate on the user's behalf.

Here are the main steps you need to follow:

  • In the Google Cloud console, go to Google Auth Platform and select Clients.
  • Click Create Client.
  • Select Web application as the client type.
  • Enter a name for your new client.
  • Add your website URL to both Authorized Javascript origins and Authorized Redirect URIs.
  • Click Create and wait 5 minutes before continuing.

After following the steps, you will get a client ID in the form:

123456789012-abcdefghijklmnopqrstuvwxyz.apps.googleusercontent.com

Provide this in the oauth-client-id attribute of the ces-messenger web component.