Captura de Tela 2022-11-01 às 17.42.20.png

Página teste: https://embedded.duotalk.io/teste.html

Primeiro passo - Instalar Snippet (código JavaScript)

<script type='text/javascript'>
    (function() {
        window.__dt = {};
        window.__dt.btnVisible = true;
        window.__dt.bottom = "20px"; 
        window.__dt.right = "20px";
        window.__dt.cardWidth = "400px";
        window.__dt.cardheight = "700px";
        window.__dt.cardZIndex =  0;
				window.__dt.btnBackgroundColor = '#eff0f6'; // cor do botao
    var be = document.createElement('script'); be.type =
    'text/javascript'; be.async = true; be.src = 
    '<https://embedded.duotalk.io/widget/plugin.js>'; var s =
    document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(be, s); })();
</script>

O embedded por padrão vem com o design de telefone

para cobrir a lateral inteira basta setar o phoneFormat como false:

window.__dt.phoneFormat = false;

As notificações ficam salvas no LocalStorage:

localStorage.getItem("embed.notifications");

Para escutar alguma mudança nas notificações basta adicionar um EventListener:

window.addEventListener("duotalk.notifications", (e) => {
		// e.detail.notifications sempre vai retornar 
		// o valor exato das notificações do embedded
		const notificationsCount = e.detail.notifications;
});

Para abrir o widget direto no contato que deseja, você deve o método dt_startConversation

<button onclick="dt_startConversation('John Doe', 551199999999)">
	Iniciar Conversa
</button>