Custom styling of the chat window through SDK

Through this event we can enable or disable access to the HTML elements of the chat window to overwrite their styles manually. For the implementation of the event it must be done outside the $aivo.ready().

// blocks chat window html elements access

$aivo.shadowRoot(true);

// unlocks chat window html elements access

$aivo.shadowRoot(false);

Example of implementation;

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

Example embedded;

ShadowRoot(true) keeps the elements locked: 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

Template

Adding new styles: requires that the available elements are previously inspected in order to identify the selector of the element to be modified.

Example;

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