Pass context variables from webpage to copilot

When your copilot is deployed on your custom website, you might want to pass context variables from your webpage to the copilot. You can effectively pass context variables from a webpage to your copilot, and use these variables to enhance the user experience. Context variables allow your copilot 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 a copilot to analyze web and copilot analytics together.

  • Pass an order ID from a webpage to the copilot so the user doesn’t have to type the order ID for the copilot again. The copilot can just take the order ID information from the webpage.

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

  • Pass the language of the webpage to the copilot so the copilot 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 copilot, then save the context in the copilot as a variable.

Pass the context from your webpage to the copilot

In your JavaScript code, where you call the copilot, include the values to be sent as context. You can pass any information, such as an OrderId, from your website to your copilot. 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 a copilot.

Save context as a variable in the copilot

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 copilot, 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 copilot analytics, see Combine web and copilot analytics.