Sample framework.js file

1

I am setting up the Embeddable Framework in Genesys. I have installed the Private Genesys Cloud Embeddable Framework in Genesys. I have examined the code for the github examples and on the Genesys website. The framework.js code is different for both examples.
Could you give a sample framework.js file that allows click to dial functionality and that will work when uploaded to Genesys.
Also could you give sample code that shows how to use on a webpage

2

Here is an example framework.js file that subscribes to message events from the host page and performs a clickToDial action in response to a message event (please replace the config.name, clientIds, and allowedOrigin with appropriate values):

// framework.js

window.Framework = {
    config: {
        name: '<yourFrameworkName>',
        clientIds: {
            'mypurecloud.com': '<yourClientId>'
        }
    },
    initialSetup() {
        window.addEventListener('message', (event) => {
            const allowedOrigin = '<yourHostOrigin>';
            if (allowedOrigin !== event.origin) {
                return;
            }
            const message = event.data;
            if (message && message.type === 'clickToDial') {
                window.PureCloud.clickToDial(message.data);
            }
        });
    }
};

When a user clicks a button on the host page, it posts a message to the embedded framework iframe as follows (please use the right Genesys Cloud region in the iframe src attribute and the right target domain for your case if it is different from US East and a different number also):

// host page

<html>

<head>
    <script>
        function performClickToDial() {
            const iframeContentWindow = document.querySelector('iframe').contentWindow;
            const targetDomain = 'https://apps.mypurecloud.com';
            const message = {
                type: 'clickToDial',
                data: {
                    number: "3172222222",
                    type: "call",
                    autoPlace: true,
                }
            };
            iframeContentWindow.postMessage(message, targetDomain);
        }
    </script>
</head>

<body>
    <button onclick="performClickToDial()">
        ClickToDial
    </button>
    <iframe
        style="width: 200px; height: 450px; border: none"
        src="https://apps.mypurecloud.com/crm/embeddableFramework.html"
        allow="camera *; autoplay *; microphone *"
    />
</body>

</html>

After a clickToDial message is processed successfully, the embedded client should place a call on behalf of the user.

3

This topic was automatically closed 31 days after the last reply. New replies are no longer allowed.