Embedding Zia widget in MS Teams personal tab

This article will guide you through the steps of embedding the Zia widget in the MS Teams apps' personal tab.

Things to configure in ServiceDesk Plus:

• Head to security settings - > Advanced.
• Add a security response header by clicking on the plus (+) button.
• Choose 'Access-Control-Allow-Origin' as the value in the Select response header dropdown.
• In the value field, add the value as 'https://teams.microsoft.com'
• Restart the ServiceDesk Plus application for the changes to take effect.

Configuring MS Teams:

• Now head to teams.microsoft.com, open the Developer Portal app and head to the Apps tab.
• If you already have the ServiceDesk Plus app installed there, click on it and head to the App features section.

• If you haven't installed the ServiceDesk Plus app before, you can either create a new app and head to the app features section, or import the zip for the ServiceDesk Plus app from here

• Inside the App features section, click on Personal app and choose Add a tab.

• Name the tab as 'Zia' (or anything as per your requirement).  The Content URL should be: "https://<domain>externalCommFrame.do?origin=https://teams.microsoft.com&is-external_chat=true" 
  
• 
  
• where <domain> should be replaced with the domain of your ServiceDesk Plus application.

• Fill the same value for the Website URL too. The scope can be 'Personal' and the context can be 'personalTab'
  

• Click Confirm to save it - save the settings again and head to the Publish to store option in the left pane.

• Click on Download app package to download the app, and then head to Apps in the left pane.

• Click on Manage your apps - > Upload an app and then Upload a custom app.

• Select the zip we just downloaded and upload it by clicking on Add.

• Once added, head to the Zia tab inside the app, and you can start using the Zia widget from the personal app.