Getting Started with Smart Embed

Zoom Contact Center Smart Embed is an iframe based web solution that communicates with the parent web application by exchanging postMessage events. In this topic we'll cover how to add Smart Embed to your web applications and start controlling the softphone.

Prerequisites

  • You must have a Contact Center license.
  • Administrators must be able to access Zoom to configure an integration in Contact Center for Smart Embed.
  • The web application where Smart Embed is embedded must support this type of integration.

Add Smart Embed to your web app

To add Smart Embed to your application, embed the Computer Telephony Integration (CTI) iframe into your web page or web application and set the initial size in your CSS.

  1. Embed the iframe in your application.

Add this code to your application, replacing YOUR_DOMAIN with the domain where this iframe will be embedded.

<iframe
    src="https://zoom.us/cci/callbar/crm/?origin=https://YOUR_DOMAIN"
    sandbox="allow-forms allow-popups allow-popups-to-escape-sandbox allow-scripts allow-same-origin allow-downloads"
    allow=";autoplay;microphone;camera;display-capture;midi;encrypted-media;clipboard-write;"
    id="zoom-embeddable-phone-iframe"
></iframe>

Note

If your company uses single sign-on (SSO) via SAML integration with your Zoom account and requires your call center agents to authenticate to Zoom through your SSO system, streamline your agents' Smart Embed login process by editing the iframe's src attribute and inserting your company's vanity URL and . right after the https://. For example, if your company's vanity URL is VanityURL, the src changes from https://zoom.us/cci/callbar/crm/?origin=https://YOUR_DOMAIN to https://VanityURL.zoom.us/cci/callbar/crm/?origin=https://YOUR_DOMAIN.

  1. Set the initial size using CSS.
<style>
    #zoom-embeddable-phone-iframe {
        height: 700px;
        width: 840px;
    }
</style>

Control the Smart Embed

Smart Embed provides events that let you control the softphone. Use these events to add the features:

Once you've initialized Smart Embed, your app is ready to start sending and receiving messages. The Contact Center Smart Embed provides some events based on the postMessage API.

Listen for events from Smart Embed

Your application listens for events from Smart Embed using the browser's postMessage API.

window.addEventListener("message", (e) => {
    const data = e.data;
    if (data) {
        switch (data.type) {
            case "zcc-call-ringing":
                // Handle incoming call
                console.log(data.data);
                break;
            case "zcc-contact-search-event":
                // Search for contacts in your system
                console.log(data.data);
                break;
        }
    }
});

Send commands to Smart Embed

Your application can send commands to Smart Embed to control the softphone, such as initiating a click-to-call.

const iframe = document.getElementById("zoom-embeddable-phone-iframe");
iframe.contentWindow.postMessage(
    {
        type: "onclicktoact",
        data: {
            phone: "+16505551234",
        },
    },
    "*",
);

Next steps

Now that you have Smart Embed set up, explore these resources.