API de Chatra.

Exemples simples

Si vous utilisez notre application Shopify, insérez simplement l'un des codes ci-dessous n'importe où dans votre fichier theme.liquid, de préférence juste avant la balise de fermeture </head>. Il n'est pas nécessaire d'insérer le code du widget Chatra, l'intégration s'en charge pour vous. Voici comment modifier votre theme.liquid.

Ouvrir le chat en cliquant sur un bouton

<!-- Bouton personnalisé n'importe où sur la page -->
<button onclick="Chatra('openChat', true)">Chattez avec nous</button>

Ou vous pouvez créer un lien avec l'adresse #chatraChatExpanded:

<!-- Lien n'importe où sur la page -->
<a href="#chatraChatExpanded">Chattez avec nous</a>

Modifier la largeur et la hauteur du widget

Spécifiez chatWidth et chatHeight (en pixels) avant le code du widget:

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

<!-- Code du widget Chatra -->

Modifier les couleurs du bouton de chat

Spécifiez les couleurs avant le code du widget

<script>
window.ChatraSetup = {
    colors: {
        buttonText: '#f0f0f0', /* couleur du texte du bouton de chat */
        buttonBg: '#565656'    /* couleur de fond du bouton de chat */
    }
};
</script>

<!-- Code du widget Chatra -->

Utilisez le sélecteur de couleurs pour générer des codes de couleur hexagonaux.

Modifier la position du bouton de chat en fonction de la largeur de l'écran

<script>
window.ChatraSetup = {
    buttonPosition: window.innerWidth < 1024 ? // seuil de largeur
        'bl' : // position du bouton de chat sur les petits écrans
        'br'  // position du bouton de chat sur les grands écrans
};
</script>

<!-- Code du widget Chatra -->

Utilisez les codes suivants pour définir la position du bouton de chat :

• 'bl' – en bas de l'écran, sur la gauche
• 'bc' – en bas de l'écran, au milieu
• 'br' – en bas de l'écran, à droite.
• 'lt' – sur le côté gauche de l'écran, en haut
• 'lm' – sur le côté gauche de l'écran, au milieu
• 'lb' – sur le côté gauche de l'écran, en bas de l'écran
• 'rt' – sur le côté droit de l'écran, en haut
• 'rm' – sur le côté droit de l'écran, au milieu
• 'rb' – sur le côté droit de l'écran, en bas.

Intégrer le chat dans un bloc arbitraire de la page

Indiquez id du bloc dans lequel vous souhaitez intégrer le chat avant le code du widget :

<script>
window.ChatraSetup = {
    mode: 'frame',
    /* id du bloc dans lequel vous voulez intégrer le chat */
    injectTo: 'chatra-wrapper'
};
</script>

<!-- Code du widget Chatra -->

injectTo accepte également les liens directs vers les nœuds HTML et les collections de nœuds de type tableau (y compris les NodeLists et les collections jQuery). Voir la description de injectTo.

Placez le bloc n'importe où sur la page :

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

Il ne reste plus qu'à définir une taille de bloc appropriée, par exemple :

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

Chatra occupera l'intégralité du bloc.

Désactiver Chatra sur les appareils mobiles

Insérez ce code avant le code du widget :

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

<!-- Code du widget Chatra -->

Ou recherchez l'option "Bouton mobile" dans les paramètres de votre widget et décochez-la.