Pass context variables from webpage to an agent

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

When to pass context variables

  • 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 user 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 user is visiting.

  • Pass the language of the webpage to the agent 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, such as an OrderId, from your website to your agent. For example, in the following code snippet, three context variables are sent:

  • Language
  • currentURL
  • OrderId

Screenshot of JSON code highlighting the three context variables that are sent.

Note

For more information, see Resuse variables across topics. In addition, for a complete custom canvas Webchat.js HTML/JavaScript 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 an "Asking a Question" node. To properly configure the topic, remember to do the following:

Screenshot of the Variables properties dialog showing the integration of variables in Copilot Studio.

Note

While this example uses the Conversation Start system topic, you can save the context received from a webpage in any topic.

With this variable in your agent, you can use it for any purpose you want, such as getting order details for the order ID, customizing the behavior of the chat for the language, and so on. For an example of how to use this concept to combine your web and agent analytics, see Combine web and agent analytics.