Share via

Pass context variables from a webpage to an agent

  • Article

When your agent is deployed on a custom website, you might want to pass context variables from a webpage to the agent, and use these variables to enhance the user experience. Context variables allow your agent to provide tailored and more meaningful interactions with visitors of your website.

When to pass context variables

Here are examples of situations where it could be useful to pass context to an agent:

  • Pass a web analytics tracking ID from a webpage to an agent to analyze web and agent analytics together.

  • Pass an order ID from a webpage to the agent so the customer doesn't have to type the order ID for the agent again. The agent can just take the order ID information from the webpage.

  • Pass the current page of the website so the agent can customize its experience according to the webpage the customer is visiting.

  • Pass the language of the webpage so the agent can customize its experience according to the webpage's language.

Passing context variables is a two-step procedure: first pass the context from your webpage to the agent, then save the context in the agent as a variable.

Pass the context from your webpage to the agent

In your JavaScript code, where you call the agent, include the values to be sent as context. You can pass any information from your website to your agent. For example, the following code snippet sends three context variables: Language, currentURL, and OrderId.

{
Language: siteLanguage,
currentURL: window.location.href,
OrderId: '12345'
}

For more information, see Add global variables to a custom canvas. In addition, for a complete custom canvas Webchat.js HTML/JavaScript example code block, see Customize the look and feel of an agent.

Save context as a variable in the agent

In the Conversation Start system topic, add a Question node. To properly configure the topic, proceed as follows:

  1. Leave the question blank. You only use the Question node as a vehicle to obtain context from an external source.

  2. For Identify, replace the default Multiple choice options with User's entire response, or the appropriate data type.

  3. Select the default variable name and, in the Variable properties panel, replace it with a representative name.

  4. Select Global (any topic can access).

  5. Select External sources can set values.

    Screenshot of the 'Variable properties' panel showing the configuration for a global variable in Copilot Studio.

  6. Optionally set the desired time-out value to allow the variable to receive its value from the external source.

Note

While this example uses the Conversation Start system topic, you can save the context received from a webpage in any topic. A good practice is to dedicate a single topic where you configure global variables to hold information you expect from external sources. For more information, see Set global variables from external sources.

Your agent can use these variables for any purposes—for example, to get order details for the order ID, or to customize the chat behavior for the language. For an example of how to use this concept to combine your web and agent analytics, see Combine web and agent analytics.