Chatra API.

Ejemplos simples

Si estás usando nuestra Shopify app, simplemente inserta alguno de los códigos a continuación en alguna parte de tu archivo theme.liquid, preferentemente justo antes del tag </head>. No hace falta insertar el código del widget de Chatra, la integración lo hará por ti. Aquí te mostramos cómo editar tu theme.liquid.

Abrir chat pulsando un botón

<!-- Botón personalizado en cualquier lugar de la página -->
<button onclick="Chatra('openChat', true)">Chatea con nosotros</button>

O puedes crear un enlace con la dirección #chatraChatExpanded:

<!-- Enlace en cualquier lugar de la página -->
<a href="#chatraChatExpanded">Chatea con nosotros</a>

Cambiar el alto y ancho del widget

Especifica chatWidth y chatHeight (en pixeles) antes del código del widget:

<script>
window.ChatraSetup = {
    chatWidth: 400,
    chatHeight: 550
};
</script>

<!-- Código del Chatra widget -->

Cambiar el color de los botones del chat

Especifica los colores antes del código del widget:

<script>
window.ChatraSetup = {
    colors: {
        buttonText: '#f0f0f0', /* color del texto del botón de chat */
        buttonBg: '#565656'    /* color de fondo del botón de chat */
    }
};
</script>

<!-- Código del Chatra widget -->

Utiliza el selector de color para generar códigos hexadecimales.

Cambiar la posición del botón de chat según el ancho de la pantalla

<script>
window.ChatraSetup = {
    buttonPosition: window.innerWidth < 1024 ? // umbral de ancho
        'bl' : // posición del botón de chat en pantallas pequeñas
        'br'  // posición del botón de chat en pantallas grandes
};
</script>

<!-- Código del Chatra widget -->

Utiliza los siguientes códigos para establecer la posición del botón de chat:

• 'bl' – en la parte inferior de la pantalla, a la izquierda
• 'bc' – en la parte inferior de la pantalla, en el medio
• 'br' – en la parte inferior de la pantalla, a la derecha
• 'lt' – en la parte izquierda de la pantalla, arriba
• 'lm' – en la parte izquierda de la pantalla, en el medio
• 'lb' – en la parte izquierda de la pantalla, abajo
• 'rt' – en la parte derecha de la pantalla, arriba
• 'rm' – en la parte derecha de la pantalla, en el medio
• 'rb' – en la parte derecha de la pantalla, abajo

Integrar el chat en un bloque arbitrario de la página

Especifica el id del bloque donde deseas integrar el chat antes del código del widget:

<script>
window.ChatraSetup = {
    mode: 'frame',
    /* id del bloque donde quieres integrar el chat */
    injectTo: 'chatra-wrapper'
};
</script>

<!-- Código del Chatra widget -->

injectTo también acepta enlances directos a nodos HTML y colecciones de nodos de tipo matriz (incluyendo colecciones NodeLists y jQuery). Consulta la descripción de injectTo.

Coloca el bloque donde quieras en la página:

<div id="chatra-wrapper"></div>

El último paso sería establecer el tamaño del bloque:

<div id="chatra-wrapper" style="width: 100%; height: 500px;"></div>

Chatra ocupará el bloque entero.

Deshabilitar Chatra en dispositivos móviles

Inserta este código antes del código del widget:

<script>
window.ChatraSetup = {
    disabledOnMobile: true
};
</script>

<!-- Código del Chatra widget -->

O busca la opción “Botón para móviles” en tus ajustes del widget y desmárcalo.