Installing Moveworks for Web with a Code Snippet and Azure OIDC

This guide walks you through the Azure SSO OIDC setup for Moveworks for Web (M4W). This will create an Azure application that will then allow customers to copy a code snippet of the bot and paste it onto any page governed by Azure SSO, and Moveworks for Web will just work, automatic authentication and all.

Prerequisite Questions

Does the site/page you want to include Moveworks for Web on allow for HTML/JavaScript editing?
- If you want it to be everywhere on the site, does it support site templates, master pages, headers, footers, or other similar global page elements that support HTML/JavaScript editing?
Is the site/page governed by Azure SSO?

Installation Prerequisites

On the day of installation, we need an individual who has Global Administrator access in your Azure tenant

🚧
The Azure OIDC silent authentication only works if users are logged into only one MS tenant. Make sure users logged out from other testing tenants when testing webchat bot. This should be rare if the end users are logged into multiple tenants at once.

Azure App Setup Instructions

Go to the https://portal.azure.com/ that lets you create Applications.

Click on App registrations

Select New Registration in the next screen.

Configure the application

Specify a name for the application. We recommend using your bot’s name.
Configure the application.
1. Based on your bot environment, set the Redirect URI as one of the following:
  Commercial Environment: https://webchat-kprod.moveworks.io/login/sso/oidc
  GovCloud Environment: https://webchat.prod.am-usge1.moveworks.io/login/sso/oidc
  EU Environment: https://webchat.prod.am-euc1.moveworks.io/login/sso/oidc
  Canada Environment: https://webchat.prod.am-cac1.moveworks.io/login/sso/oidc

Select options as shown below.

Generate idp_secret

Go to Certificates & secrets on the left
Click New client secret
Add Description and Expires. 24 months is our recommended option to go with as it is the longest time possible. You can have multiple secrets at once, so before one expires you can create another for a seamless cutover.

Once the secret is created, copy the value and send to Moveworks engineer. Note that this value is only accessible at the time of creation. You will need to create a new one if the previous one isn’t saved before leaving the page.

Grant tenant level user consent to the app

Go to Azure Active Directory
Go to Enterprise Application under Manage
Find the application just created and open
Go to Permissions and click Grant admin consent for

Finish Moveworks’ side of the integration

After setup is complete, the following information must be shared with Moveworks Customer Success, with the saved secret above.

Go the Overview in App registrations → your app just created.
1. idp_client_id
2. idp_issuer
3. idp_secret (saved locally in the previous step)

Prepare code snippet

You will need to paste the following code snippet in your web page html body.

The highlighted red areas are provided based on your settings. bot_id is the unique bot ID provided by your CS team.

If your installation does not require any style overrides then use the following:

<script src="https://webchat-kprod.moveworks.io/script/<bot_id>" />

<script src="https://webchat.prod.am-usge1.moveworks.io/script/<bot_id>" />

<script src="https://webchat.prod.am-euc1.moveworks.io/script/<bot_id>" />

<script src="https://webchat.prod.am-cac1.moveworks.io/script/<bot_id>" />

Otherwise use the following:

<div id="webchat">
    <script>
        var script = document.createElement('script');
        script.type = "text/javascript";
        script.onload = function () {
            window.mwwebchat.openMWWebChat(
                '', <!--Leave this blank; this is for token-based deploys. -->
                '<bot_id>',
                {
                    serverUrl: 'https://webchat-kprod.moveworks.io/login/<bot_id>',
										styles: '<optional, see below>'
                },
            );
        };
        script.src = 'https://webchat-kprod.moveworks.io/movewebchat-client-script.js';
        document.getElementById('webchat').appendChild(script);
    </script>
</div>

<div id="webchat">
    <script>
        var script = document.createElement('script');
        script.type = "text/javascript";
        script.onload = function () {
            window.mwwebchat.openMWWebChat(
                '', <!--Leave this blank; this is for token-based deploys. -->
                '<bot_id>',
                {
                    serverUrl: 'https://webchat.prod.am-usge1.moveworks.io/login/<bot_id>',
										styles: '<optional, see below>'
                },
            );
        };
        script.src = 'https://webchat.prod.am-usge1.moveworks.io/movewebchat-client-script.js';
        document.getElementById('webchat').appendChild(script);
    </script>
</div>

<div id="webchat">
    <script>
        var script = document.createElement('script');
        script.type = "text/javascript";
        script.onload = function () {
            window.mwwebchat.openMWWebChat(
                '', <!--Leave this blank; this is for token-based deploys. -->
                '<bot_id>',
                {
                    serverUrl: 'https://webchat.prod.am-euc1.moveworks.io/login/<bot_id>',
										styles: '<optional, see below>'
                },
            );
        };
        script.src = 'https://webchat.prod.am-euc1.moveworks.io/movewebchat-client-script.js';
        document.getElementById('webchat').appendChild(script);
    </script>
</div>

<div id="webchat">
    <script>
        var script = document.createElement('script');
        script.type = "text/javascript";
        script.onload = function () {
            window.mwwebchat.openMWWebChat(
                '', <!--Leave this blank; this is for token-based deploys. -->
                '<bot_id>',
                {
                    serverUrl: 'https://webchat.prod.am-cac1.moveworks.io/login/<bot_id>',
										styles: '<optional, see below>'
                },
            );
        };
        script.src = 'https://webchat.prod.am-cac1.moveworks.io/movewebchat-client-script.js';
        document.getElementById('webchat').appendChild(script);
    </script>
</div>

You can also added these optional parameters along with the serverUrl. See below.
- styles controls the position of the avatar

								{
                    serverUrl: 'https://webchat-kprod.moveworks.io/login/<bot_id>',
                    styles: { 
							        bottom: '0px',
							        right: '10px',
							        zIndex: 999,
							    },
                },

								{
                    serverUrl: 'https://webchat.prod.am-usge1.moveworks.io/login/<bot_id>',
                    styles: { 
							        bottom: '0px',
							        right: '10px',
							        zIndex: 999,
							    },
                },

								{
                    serverUrl: 'https://webchat.prod.am-euc1.moveworks.io/login/<bot_id>',
                    styles: { 
							        bottom: '0px',
							        right: '10px',
							        zIndex: 999,
							    },
                },

								{
                    serverUrl: 'https://webchat.prod.am-cac1.moveworks.io/login/<bot_id>',
                    styles: { 
							        bottom: '0px',
							        right: '10px',
							        zIndex: 999,
							    },
                },

Congrats! You did it! By pasting this onto a given page, or template for a page, the bot will appear if the user successfully authenticates. Authentication is seamless, and no login prompt will ever be seen by the user. If the user is not authenticated, the bot will simply not appear. This is true for all websites governed by Azure OIDC SSO, thus you are now free to paste this snippet anywhere that supports it.

By default, this behavior is NOT enabled for all users. Work with your CS team to first create an allowlist of users who can test the web bot before having them enable it to all users.