servicenow-widget

<div>
      <style>
        .mw-bs .wait-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            min-height: 500px;
            z-index: 1100;
            background-color: rgba(255, 255, 255, 0.5);
        }

        .mw-bs .wait-message {
            position: relative;
            text-align: center;
            margin-top: 1em;
            display: block;
            top: 40%;
            font-size: 2em;
            padding: 0 2em;
        }

        /* outer */
        .mw-bs .wait-spinner {
            display: block;
            position: relative;
            left: 50%;
            width: 150px;
            height: 150px;
            margin: 200px 0 0 -75px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #268AAF;
            -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
            animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
        }

        /* middle */
        .mw-bs .wait-spinner:before {
            content: "";
            position: absolute;
            top: 5px;
            left: 5px;
            right: 5px;
            bottom: 5px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #31B2E2;
            -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
              animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
        }

        /* inner */
        .mw-bs .wait-spinner:after {
            content: "";
            position: absolute;
            top: 15px;
            left: 15px;
            right: 15px;
            bottom: 15px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #154E62;
            -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
              animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
        }

        @-webkit-keyframes spin {
            0%   {
                -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: rotate(0deg);  /* IE 9 */
                transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
            }
            100% {
                -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: rotate(360deg);  /* IE 9 */
                transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
            }
        }
        @keyframes spin {
            0%   {
                -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: rotate(0deg);  /* IE 9 */
                transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
            }
            100% {
                -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: rotate(360deg);  /* IE 9 */
                transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
            }
        }
    </style>

    <div id="manywho">
        <div id="loader" class="mw-bs" style="width: 100%; height: 100%;">
            <div class="wait-container">
                <div class="wait-spinner"></div>
            </div>
        </div>
    </div>

    <script src="https://assets.manywho.com/js/vendor/jquery-2.1.4.min.js"></script>

    <script>
        var manywho = {
            cdnUrl: 'https://assets.manywho.com',
            requires: ['core', 'bootstrap3'],
            initialize: function () {

                var queryParameters = manywho.utils.parseQueryString(window.location.search.substring(1));

                manywho.settings.initialize({
                    adminTenantId: 'da497693-4d02-45db-bc08-8ea16d2ccbdf',
                    playerUrl: [ location.protocol, '//', location.host, location.pathname ].join(''),
                    joinUrl: [ location.protocol, '//', location.host, location.pathname ].join(''),
                    platform: {
                      uri: 'https://flow.manywho.com'
                    }  
                });

                var options = {
                    authentication: {
                        sessionId: queryParameters['session-token'],
                        sessionUrl: queryParameters['session-url']
                    },
                    navigationElementId: queryParameters['navigation-element-id'],
                    mode: queryParameters['mode'],
                    reportingMode: queryParameters['reporting-mode'],
                    replaceUrl: false,
                    collaboration: {
                        isEnabled: false
                    },
                    inputs: null,
                    annotations: null,
                    navigation: {
                        isFixed: true,
                        isWizard: false
                    },
                    callbacks: [],
                    theme: queryParameters['theme'] != null ? queryParameters['theme'] : 'yeti'
                };

                var tenantId = queryParameters['tenant-id'];
                if (!tenantId) {
                    tenantId = window.location.pathname
                                .split('/')
                                .filter(function (path) {
                                    return path && path.length > 0;
                                })[0];
                }

                manywho.engine.initialize(
                    '*********', //insert tenant-id
                    '*********', //insert flow-id
                    queryParameters['flow-version-id'],
                    'main',
                    queryParameters['join'],
                    queryParameters['authorization'],
                    options,
                    queryParameters['initialization']
                );

            }
        };
    </script>

    <script src="https://assets.manywho.com/js/loader.min.js"></script>
</div>