Can we have many different virtual agents on one portal? What does it look like?

[Junyu]

Dear all,

I'm investigating if a scenario like this is possible:

1. When I enter the portal home page with the suffix sp, it shows the Virtual Agent about the introduction/overview content

2. Then I click the menu header "Finance", and I reached the menu page with many finance-related catalog items. It shows the Virtual Agent about the Finance content

Such a scenario means that when I click on the portal to enter a page related to a certain theme, the Virtual Agent will be switched to this theme. I want to know if it is feasible? How to do it?

[Riya Verma]

Hi @Junyu ,

Hope you are doing great.

You can follow below steps: 

1. Identify Portal Pages and Themes:

   • Determine the specific pages in the portal that are associated with different themes or topics, such as the home page and the finance-related menu page in your example.
   • Ensure that each page is configured with the appropriate theme or category.

2. Configure Virtual Agent Content:

   • Create different Virtual Agent content items for each theme or category you want to switch between.
   • Each Virtual Agent content item should be tailored to provide relevant information based on the associated theme or category.

3. Use Client Scripting:

   • Implement client-side JavaScript code to detect the current page and dynamically switch the Virtual Agent content based on the theme.
   • You can leverage the 'sp_page' global object to retrieve information about the current portal page.
   • Within the client script, you can use conditional statements to identify the current page and load the corresponding Virtual Agent content.

function switchVirtualAgentContent() {
   var currentPage = sp_page.get('name');
   var virtualAgentContentId;

   // Determine the Virtual Agent content based on the current page
   if (currentPage === 'home') {
      virtualAgentContentId = 'introduction_content_id';
   } else if (currentPage === 'finance') {
      virtualAgentContentId = 'finance_content_id';
   }

   // Set the Virtual Agent content
   if (virtualAgentContentId) {
      var virtualAgent = document.getElementById('virtual_agent_element_id');
      virtualAgent.setAttribute('content', virtualAgentContentId);
   }
}

// Call the switchVirtualAgentContent() function when the portal page finishes loading
document.addEventListener('DOMContentLoaded', switchVirtualAgentContent);
​

• Customize Virtual Agent Component:
  • Customize the Virtual Agent component in the portal to include the necessary HTML markup and styling.
  • Make sure the Virtual Agent component has an identifier (e.g., 'virtual_agent_element_id') that can be targeted in the client-side script.

[Junyu]

Hi @Riya Verma ,

Thanks for your answer, is it any video or documents for the demo? Can you show me the link?

Thank you.