Encontre a resposta que está procurando

Estilo personalizado da janela de bate-papo via SDK

Por meio desse evento, podemos ativar ou desativar o acesso aos elementos HTML da janela de bate-papo para substituir seus estilos manualmente. A implementação do evento deve ser feita fora de $aivo.ready(). 

// blocks chat window html elements access

$aivo.shadowRoot(true);

// unlocks chat window html elements access

$aivo.shadowRoot(false);

Exemplo de implementação;

<script>

let scriptAivo = document.createElement('script');

const token = '{your_channel_token}'

scriptAivo.classList= 'script-aivo'

scriptAivo.type = 'text/javascript';

scriptAivo.src = 'https://cdn.agentbot.net/core/latest/core.js?Myjagsd4wLjY===';

scriptAivo.onload = function() {

    $aivo.run(token)

    $aivo.shadowRoot(false)

}

setTimeout(() => {document.getElementsByTagName("head")[0].appendChild(scriptAivo)},500);

</script>

Exemplo incorporado;


ShadowRoot(true) mantém os elementos bloqueados: http://embed.agenbot.net/[nombre]/[token]?shadow-aivo=true'


ShadowRoot(false) desbloqueia os elementos da janela de bate-papo: http:// embed.agenbot.net/[nombre]/[token]?shadow-aivo=false

Modelo 

Adição de novos estilos: requer que os elementos disponíveis sejam inspecionados previamente para identificar o seletor do elemento a ser modificado. 

Exemplo;

 <script>

       // SNIPPET FOR ENABLED CUSTOM CSS UPDATES IN AGENTCORE

       //example to keep text field locked indefinitely

      /*

        We inspect the element that we want to modify and we find that it has the selector #agent-add-message

        we define the variable with the necessary css instruction to achieve the expected behavior

      */

      // css-rules example

      const BLOCKED_INPUT_CCS = '

        #agent-add-message{

          cursor: not-allowed;

          pointer-events: none;

          overflow: hidden;

          opacity: .5;

        }

      '

      //CDN AIVO

      const SRC_AIVO = 'https://cdn.agentbot.net/core/latest/core.js?Myjagsd4wLjY==='

      // web channel AIVO

      const TOKEN_AIVO = 'add token, check your web channel with the aivo team'

      /*

        create script and receive as parameter the callback to execute once the script is loaded

      */

      const createScriptAivo = function({callback = function(){},}){

        const scriptAivo = document.createElement("script");

        scriptAivo.src = SRC_AIVO;

        scriptAivo.onload = callback

        return scriptAivo

      }

      /*

        callback that runs sdk to enable css modifications

      */

      const openShadowDomUpdateStyle = function(){

        try {

          window.$aivo.run(TOKEN_AIVO)

          window.$aivo.shadowRoot(false)

          const style = document.createElement( 'style' )

          style.innerHTML = BLOCKED_INPUT_CCS

          setTimeout(function(){

            const element =document.querySelector('#AgentAppContainer')

            element.shadowRoot.appendChild( style )

          },1000)

        } catch (error) {

          console.warn(error)

        }

      }

      // run the tools createScriptAivo with the callback openShadowDomupdateStyle

      const scriptAivo = createScriptAivo({

        callback:openShadowDomUpdateStyle

      })

      // note that this last line must be executed after the head tag

      document.getElementsByTagName("head")[0].appendChild(scriptAivo)

    </script>

Este site armazena cookies em seu computador. Estes cookies são utilizados para coletar informações de como você interage com o nosso site e nos permite lembrar de você. Nós usamos essa informação para melhorar e personalizar sua experiência de navegação e para obter estatísticas e métricas sobre nossos visitantes, tanto neste site quanto em outros meios. Para obter mais informações sobre os cookies que utilizamos, consulte nossa Política de Privacidade.

Se você recusar, sua informação não será rastreada quando você visitar este site. Será utilizado somente um cookie em seu navegador para lembrá-lo de sua preferência de não ser rastreado.