# Getting Started with Smart Embed

<!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! -->

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](https://zoom.us/pricing/zoom-contact-center).
-   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.

```html
<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.

```html
<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:

-   [Initialize the Smart Embed interface](/docs/contact-center/smart-embed/events/#zcc-init-config-request)
-   [Resize softphone](/docs/contact-center/smart-embed/events/#zcc-resize)
-   [Contact search](/docs/contact-center/smart-embed/events/#zcc-contact-search-event)
-   [Click-to-call](/docs/contact-center/smart-embed/events/#click-to-dial-from-a-third-party-app)
-   [Receive a call](/docs/contact-center/smart-embed/events/#zcc-call-ringing)
-   [Screen popup](/docs/contact-center/smart-embed/events/#zcc-screen-pop)
-   [Inbound and outbound call notifications](/docs/contact-center/smart-embed/events/#zcc-call-ringing)
-   [Support to add a custom notes page](/docs/contact-center/smart-embed/events/#zcc-add-note)
-   [Call recording](/docs/contact-center/smart-embed/events/#zcc-call-recording)
-   [Wrap-up](/docs/contact-center/smart-embed/events/#zcc-close-engagement-wrapup)
-   [Get the value from global custom variables](/docs/contact-center/smart-embed/events/#zcc-get-variables)

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.

```javascript
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.

```javascript
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.

-   [Event Reference](/docs/contact-center/smart-embed/events) - Complete event documentation organized by feature
-   [Error Handling](/docs/contact-center/smart-embed/error-handling) - Understand error patterns and codes