Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

Personnalisez le comportement de lancement du widget et l'icône du bouton pour votre site Web hébergé sur Amazon Connect

Pour personnaliser davantage la façon dont votre site Web affiche et lance l'icône du widget hébergé, vous pouvez configurer le comportement de lancement et masquer l'icône par défaut. Par exemple, vous pouvez lancer le widget par programmation à partir d'un élément du bouton Discuter avec nous affiché sur votre site Web.

Comment configurer un comportement de lancement personnalisé pour le widget

Pour transmettre un comportement de lancement personnalisé, utilisez l'exemple de bloc de code suivant et incorporez-le dans votre widget. Tous les champs présentés dans l'exemple suivant sont facultatifs et n'importe quelle combinaison peut être utilisée.

amazon_connect('customLaunchBehavior', {
    skipIconButtonAndAutoLaunch: true,
    alwaysHideWidgetButton: true,
    programmaticLaunch: (function(launchCallback) {
        var launchWidgetBtn = document.getElementById('launch-widget-btn');
        if (launchWidgetBtn) {
            launchWidgetBtn.addEventListener('click', launchCallback);
            window.onunload = function() {
            launchWidgetBtn.removeEventListener('click', launchCallback);
            return;
            }
        }
    })
});

Options et contraintes prises en charge

Le tableau suivant répertorie les options de comportement de lancement personnalisé prises en charge. Les champs sont facultatifs et n'importe quelle combinaison peut être utilisée.

Configuration du lancement du widget pour des cas d'utilisation personnalisés

Bouton de lancement du widget personnalisé

L'exemple suivant montre les modifications que vous devez apporter au widget pour configurer le lancement par programmation afin qu'il ne s'ouvre que lorsque l'utilisateur choisit un élément de bouton personnalisé affiché n'importe où sur votre site Web. Par exemple, il peut choisir un bouton nommé Nous contacter ou Discuter avec nous. Vous pouvez éventuellement masquer l'icône du widget Amazon Connect par défaut tant que le widget n'est pas ouvert.

<button id="launch-widget-btn">Chat With Us</button>

<script type="text/javascript">
 (function(w, d, x, id){
    s=d.createElement("script");
    s.src="./amazon-connect-chat-interface-client.js"
    s.async=1;
    s.id=id;
    d.getElementsByTagName("head")[0].appendChild(s);
    w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
  })(window, document, 'amazon_connect', 'asfd-asdf-asfd-asdf-asdf');
  amazon_connect('styles', { openChat: { color: '#000', backgroundColor: '#3498fe'}, closeChat: { color: '#fff', backgroundColor: '#123456'} });
  amazon_connect('snippetId', "QVFJREFsdafsdfsadfsdafasdfasdfsdafasdfz0=")
  amazon_connect('customLaunchBehavior', {
        skipIconButtonAndAutoLaunch: true,
        alwaysHideWidgetButton: true,
        programmaticLaunch: (function(launchCallback) {
            var launchWidgetBtn = document.getElementById('launch-widget-btn');
            if (launchWidgetBtn) {
                launchWidgetBtn.addEventListener('click', launchCallback);
                window.onunload = function() {
                launchWidgetBtn.removeEventListener('click', launchCallback);
                return;
                }
            }
        }),
    });
</script>

Prise en charge des hyperliens

L'exemple suivant présente les modifications que vous devez apporter à la configuration de widget auto-launch, qui permet d'ouvrir le widget sans attendre que l'utilisateur clique. Vous pouvez effectuer un déploiement sur une page hébergée par votre site Web pour créer un lien hypertexte partageable.

https://example.com/contact-us?autoLaunchMyWidget=true

<script type="text/javascript">
 (function(w, d, x, id){
    s=d.createElement("script");
    s.src="./amazon-connect-chat-interface-client.js"
    s.async=1;
    s.id=id;
    d.getElementsByTagName("head")[0].appendChild(s);
    w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
  })(window, document, 'amazon_connect', 'asfd-asdf-asfd-asdf-asdf');
  amazon_connect('styles', { openChat: { color: '#000', backgroundColor: '#3498fe'}, closeChat: { color: '#fff', backgroundColor: '#123456'} });
  amazon_connect('snippetId', "QVFJREFsdafsdfsadfsdafasdfasdfsdafasdfz0=")
  amazon_connect('customLaunchBehavior', {
        skipIconButtonAndAutoLaunch: true
    });
</script>

Chargement des ressources du widget par un clic sur un bouton

L'exemple suivant présente les modifications que vous devez apporter au widget pour accélérer le chargement de la page de votre site Web en récupérant les ressources statiques du widget lorsqu'un utilisateur clique sur le bouton Discuter avec nous. En général, seul un faible pourcentage de clients visitant une page Nous contacter ouvre le widget Amazon Connect. Le widget peut ajouter de la latence au chargement des pages en récupérant des fichiers depuis le CDN, même si les clients n'ouvrent jamais le widget.

Une autre solution consiste à exécuter l'extrait de code de manière asynchrone (ou jamais) en cliquant sur un bouton.

<button id="launch-widget-btn">Chat With Us</button>

var buttonElem = document.getElementById('launch-widget-btn');

buttonElem.addEventListener('click', function() {
    (function(w, d, x, id){
        s=d.createElement("script");
        s.src="./amazon-connect-chat-interface-client.js"
        s.async=1;
        s.id=id;
        d.getElementsByTagName("head")[0].appendChild(s);
        w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
    })(window, document, 'amazon_connect', 'asfd-asdf-asfd-asdf-asdf');
    amazon_connect('styles', { openChat: { color: '#000', backgroundColor: '#3498fe'}, closeChat: { color: '#fff', backgroundColor: '#123456'} });
    amazon_connect('snippetId', "QVFJREFsdafsdfsadfsdafasdfasdfsdafasdfz0=")
    amazon_connect('customLaunchBehavior', {
        skipIconButtonAndAutoLaunch: true
    });
});

Lancement d'un nouveau chat dans une fenêtre de navigateur

L'exemple suivant présente les modifications que vous devez apporter au widget pour ouvrir une nouvelle fenêtre de navigateur et lancer automatiquement le chat en mode plein écran.

<button id="openChatWindowButton">Launch a Chat</button>

<script> // Function to open a new browser window with specified URL and dimensions
    function openNewWindow() {
        var url = 'https://mycompany.com/support?autoLaunchChat=true';

        // Define the width and height
        var width = 300;
        var height = 540;

        // Calculate the left and top position to center the window
        var left = (window.innerWidth - width) / 2;
        var top = (window.innerHeight - height) / 2;

        // Open the new window with the specified URL, dimensions, and position
        var newWindow = window.open(url, '', 'width=${width}, height=${height}, left=${left}, top=${top}');
    }

    // Attach a click event listener to the button
    document.getElementById('openChatWindowButton').addEventListener('click', openNewWindow);
</script>

Activer la persistance des sessions de chat entre les onglets

Par défaut, si un chat est ouvert dans un onglet, puis que l'utilisateur ouvre un nouvel onglet et démarre un autre chat, un nouveau chat démarre au lieu de se connecter au chat existant. Vous pouvez activer la persistance des sessions de chat entre les onglets si vous souhaitez que l'utilisateur se connecte au chat existant qui a été lancé dans l'onglet initial.

La session de chat est enregistrée dans le stockage de session du navigateur dans la variablepersistedChatSession. Vous devez copier cette valeur dans le stockage de session du nouvel onglet lors de la première initialisation du widget. Vous trouverez ci-dessous les instructions.