Estilo personalizado de la ventana de chat a través de SDK

A través de este evento podemos habilitar o deshabilitar el acceso a los elementos HTML de la ventana de chat para sobrescribir sus estilos manualmente. Para la implementación del evento debe hacerse fuera del $aivo.ready().

// blocks chat window html elements access

$aivo.shadowRoot(true);

// unlocks chat window html elements access

$aivo.shadowRoot(false);

Ejemplo de implementación;

<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>

Ejemplo incrustado;

ShadowRoot(true) mantiene los elementos bloqueados: http://embed.agenbot.net/[nombre]/[token]?shadow-aivo=true'

ShadowRoot(false) desbloquea los elementos de la ventana de chat: http:// embed.agenbot.net/[nombre]/[token]?shadow-aivo=false

Plantilla

Adición de nuevos estilos: requiere que los elementos disponibles sean inspeccionados previamente con el fin de identificar el selector del elemento a modificar.

Ejemplo;

<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>