Veja nesse tutorial rapidamente como você pode adicionar mensagens de audio para seu lead no meio do fluxo do Merlin.
O primeiro passo é dentro do fluxo adicionarmos um componente de Javascript e um componente de mensagem.
Dentro do componente de JS insira o seguinte código*(Mais a frente do tutorial mostramos como usar um arquivo de áudio do dropbox)*:
// Envia a mensagem com o áudio
window.top.postMessage("link do seu arquivo aqui", "*");
Agora no componente de mensagem de texto vá em avançado e adicione o id CSS para audio
e deixe a mensagem em branco.
Agora vá para a aba de Configurações>>Adicione um código Javascript e insira o seguite código:
// Adiciona um listener para ouvir mensagens enviadas para a janela
window.addEventListener("message", (event) => {
if (event.data && typeof event.data === "string") {
const audioSrc = event.data;
// Cria um MutationObserver para observar alterações na página
const observer = new MutationObserver((mutationsList, observer) => {
const audioElement = document.getElementById("audio");
if (audioElement) {
// Atualiza o HTML interno com o player de áudio sem a opção de download
audioElement.innerHTML = `<audio controls controlslist="nodownload">
<source src="${audioSrc}" type="audio/mpeg">
Your browser does not support the audio element.
</audio>`;
observer.disconnect(); // Para de observar
// console.log("Elemento 'audio' encontrado e atualizado.");
}
});
// Inicia a observação no corpo da página
observer.observe(document.body, {
childList: true, // Observa adições e remoções de elementos filhos
subtree: true, // Observa toda a árvore DOM
});
// console.log("Observando alterações na página para encontrar o elemento 'audio'...");
}
}, false);
Com essas configurações está pronto! Agora sempre que quiser adicionar um áudio no fluxo adicione o elemento js com o link e o componente de mensagem com o id css.