Cannot log into Zoom Contact Center Smart Embed

Contact Center
1

We are having issues with login in Zoom Contact Center Smart Embed.
Have tested smart embed inserted in a HTML file and it works fine, But when hosting the same file in a Web Server we cannot complete the login.

The contact center app is shown correctly, and when pressing the login button, another page is opened to provide the login credentials, the page : Sign In | Zoom

The login is done correctly, but the javascript on the page fails with this error:

9ed3f61a.js:3 Uncaught TypeError: Cannot read properties of null (reading ‘postMessage’)

The error happens on this function, located on this javascript file: 93d3f61a.js

function Ae() {
return Ae = Te(f().mark(function e(t) {
var r, n, a, i, s, o, u, c, l, m;
return f().wrap(function(y) {
for (; ; )
switch (y.prev = y.next) {
case 0:
return r = {},
y.next = 3,
nr();
case 3:
if (n = y.sent,
a = n.access_token,
i = n.x_zm_aid,
s = n.x_zm_haid,
o = n.x_zm_client_cluster_id,
!a) {
y.next = 13;
break
}
return y.next = 8,
It(Jt, {
data: {
checkOrigin: t
},
headers: {
Authorization: "Bearer ".concat(a),
“x-zm-aid”: i,
“x-zm-haid”: s,
“x-zm-client-cluster-id”: o
}
});
case 8:
u = y.sent,
c = Xt(u, 2),
l = c[0],
m = c[1],
!l && m && (r = n);
case 13:
qe(t, r);
case 14:
case “end”:
return y.stop()
}
}, e)
})),
Ae.apply(this, arguments)
}
try {
var or = window.opener.origin;
ar(or)
} catch {
window.addEventListener(“message”, function(t) {
var r = t.data
, n = t.origin;
r === “third-login-origin” && n && ir(n)
}),
window.opener.postMessage(“third-login-loaded”, “*”)
}
}

The error happens on the catch:

} catch {
window.addEventListener(“message”, function(t) {
var r = t.data
, n = t.origin;
r === “third-login-origin” && n && ir(n)
}),
window.opener.postMessage(“third-login-loaded”, “*”)
}

The authentication token is not provided to the original page with the smart embed, and the login page is never closed.

Any clue about what might be the cause for this?

I am hosting this webpage using ngnix and django.

Might there be some issue with HTTPS and CORS, or something similar?

2

Have you configure your Zoom Contact Center Smart Embed inside your Zoom account ?

You will need to do this by logging into your Zoom admin portal, navigating to Contact Center Management > Integrations. From there on the Applications tab, make sure you have added your Smart Embed domain.

3

Hello, Justin.
Thank you for your attention.
Yes, everything is properly configured. The Smart Embed integration is working perfectly fine when added to a local html file, i can log with my account and participate in engaments, receive all the events, etc.

Is only when i try to host the same file online, using django, that we have the issue above.

4

On your ZCC admin portal, you do need to put in the full domain name of your HTTPS site. As long as you have done that, it should work. See example below.

image

If you have done this step above, the issue made be in your code as the error is thrown by 9ed3f61a.js

For troubleshooting purposes on your site, maybe you can add a test.html page with a simple iframe.

5

Hello, Justin.

Webpage to test cannot be more simple, is the iframe and nothing more, but i still get the same error.

This is the webpage used:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <title>HTML</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>#zoom-embeddable-phone-iframe {
			height: 800px;
			width: 900px;}
			.contenido { display:flex;
						 
			}
			.derecha {width : 900px;
				      height: 800px;
					  
			}
					
			.enlaces {width: 900px;
			height: 400px;
			display: grid;
			align-content: center;
			justify-items: start;
			align-items: start;
			justify-content: start;
					 
					  
			}
			.info    {width : 900px;
				      height: 400px;
					  background-color:red;
					  
			}
			span{max-width: 200px;
					margin: 20px auto;
				padding: 20px;
				border: 2px solid #add8e6; /* Borde con línea azulada */
				border-radius: 5px;
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
			}
	</style>
	
 </head>
<body>
<div class="contenido ">
    <div>
	<iframe
	src="https://zoom.us/crm-int/callbar/?origin=https://4zs-curious-einstein.circumeo-apps.net/contact/zcc"
            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>
	</div>
   
</body>

</html>

Is there any security consideration, or anything that might be causing this?
Some CORS configuration? Is there any logs or traffic capture that i can gather to check this? It is possible to trace the javascript error, in some way?

Best Regards,

6

Hi Jaime,

The origin parameter should not include /contact/zcc

It should be:

https://zoom.us/crm-int/callbar/?origin=https://4zs-curious-einstein.circumeo-apps.net

can you please give that a try ?

7

Hello Justin.

Have tried all combinations, having only the domain or all the url, here and in the integration in zoom admin, and the issue is the same.

There is some kind of issue in the component for smart embed when added to my web page.

Is there any way i can debug the smart embed component?