Configuration de l’objet de personnalisation Options et contraintes prises en charge

Personnalisations supplémentaires pour votre widget de chat Connect Customer

Vous pouvez ajouter les personnalisations facultatives suivantes à votre interface utilisateur de chat :

Affichez le bouton Mettre fin à la conversation dans le menu déroulant d’en-tête plutôt que dans le pied de page.
Masquez ou dissimulez les noms d’affichage.
Ajoutez des icônes de message.
Remplacez les messages d’événements.
Configurez une boîte de dialogue de confirmation qui sera présentée aux clients lorsqu’ils choisissent le bouton Mettre fin au chat. Cette boîte de dialogue vérifie que les clients ont bien l’intention de mettre fin à la session de chat. Vous pouvez personnaliser la boîte de dialogue de confirmation, le titre, le message et le texte du bouton.
Remplacez le message de rejet de la pièce jointe.
Affichez un bouton Réduire dans l'en-tête du chat.

Configuration de l’objet de personnalisation

L’exemple suivant illustre comment implémenter toutes les personnalisations facultatives. Pour obtenir la liste de toutes les personnalisations possibles, consultez Options et contraintes prises en charge. Comme elles sont facultatives, vous pouvez implémenter une partie ou la totalité des champs présentés dans l’exemple suivant. Remplacez les chaînes eventNames.customer, eventNames.agent, eventNames.supervisor, eventMessages.participantJoined, eventMessages.participantDisconnect, eventMessages.participantLeft, eventMessages.participantIdle, eventMessages.participantReturned et eventMessages.chatEnded selon les besoins. Les icônes doivent être hébergées sur des URL publiques.


amazon_connect('customizationObject', {
        header: { 
            dropdown: true, 
            dynamicHeader: true,
            minimizeChatHeaderButton: true,
        },
        transcript: { 
            hideDisplayNames: false, 
            eventNames: {
                customer: "User",
                agent: "Webchat Agent",
                supervisor: "Webchat Supervisor"
            },
            eventMessages: {
                participantJoined: "{name} has joined the chat",
                participantDisconnect: "",
                participantLeft: "{name} has dropped",
                participantIdle: "{name}, are you still there?",
                participantReturned: "",
                chatEnded: "Chat ended",
            },
            displayIcons: true,
            iconSources: { 
                botMessage: "imageURL",
                systemMessage: "imageURL",
                agentMessage: "imageURL",
                customerMessage: "imageURL",
            },
        },
        composer: {
            disableEmojiPicker: true,
            disableCustomerAttachments: true,
            alwaysHideToolbar: true,
            hide: false,
        },
        footer: {
            disabled:true,
            skipCloseChatButton: true,
        },
        endChat: {
            enableConfirmationDialog: true,
            confirmationDialogText: {
                title: "End Chat",
                message: "Are you sure you want to end this chat?",
                confirmButtonText: "End Chat",
                cancelButtonText: "Cancel",
        },
    },
    attachment: {
         // Default rejectedErrorMessage: Attachment was rejected.
        rejectedErrorMessage: "Custom Error Message: Files cannot exceed 15 MB." //this is customizable attribute 
    }
});

L’image suivante montre à quoi ressemblent les personnalisations si vous utilisez cet exemple :

Les noms d'affichage personnalisables, l'emplacement des menus, les icônes et la boîte de dialogue de confirmation de fin de discussion.

Options et contraintes prises en charge

Le tableau suivant répertorie les champs de personnalisation pris en charge et les contraintes de valeurs recommandées.

Option de mise en page personnalisée	Type	Description
`header.dropdown`	Booléen	Affiche le rendu du menu déroulant d’en-tête à la place du pied de page par défaut. Note Lorsque vous définissez cette option sur `true`, le bouton Téléchargement de la transcription apparaît et reste visible jusqu’à ce que vous définissiez l’option sur `false` ou que vous la supprimiez.
`header.dynamicHeader`	Booléen	Définit dynamiquement le titre de l'en-tête sur « Discuter avec Bot/AgentName ».
`header.hideTranscriptDownloadButton`	Booléen	Masquez le bouton de téléchargement de la transcription dans le menu déroulant d’en-tête. La valeur par défaut est `false`.
`header.minimizeChatHeaderButton`	Booléen	Affiche un bouton Réduire dans l'en-tête du chat. La valeur par défaut est `false`.
`transcript.hideDisplayNames`	Booléen	Masque tous les noms d’affichage, applique les masques de nom par défaut si `eventNames` n’est pas fourni.
`transcript.eventNames.customer`	Chaîne	Masque le nom d’affichage du client.
`transcript.eventNames.agent`	Chaîne	Masque le nom d’affichage de l’agent.
`transcript.eventNames.supervisor`	Chaîne	Masque le nom d’affichage du superviseur.
`transcript.eventMessages.participantJoined`	Chaîne	Remplace le message de l’événement dans la transcription lorsqu’un participant rejoint le chat. Si une chaîne vide est spécifiée, le message d’événement sera omis de la transcription. `{name}` peut être transmis dans le message et sera remplacé par le nom d’affichage du participant correspondant. Le message par défaut est `{name} has joined the chat`.
`transcript.eventMessages.participantDisconnect`	Chaîne	Remplace le message d’événement dans la transcription lorsqu’un participant est déconnecté du chat. Si une chaîne vide est spécifiée, le message d’événement sera omis de la transcription. `{name}` peut être transmis dans le message et sera remplacé par le nom d’affichage du participant correspondant. Le message par défaut est {`name} has been idle too long, disconnecting`.
`transcript.eventMessages.participantLeft`	Chaîne	Remplace le message de l’événement dans la transcription lorsqu’un participant quitte le chat. Si une chaîne vide est spécifiée, le message d’événement sera omis de la transcription. `{name}` peut être transmis dans le message et sera remplacé par le nom d’affichage du participant correspondant. Le message par défaut est `{name} has left the chat`.
`transcript.eventMessages.participantIdle`	Chaîne	Remplace le message d’événement dans la transcription lorsqu’un participant est inactif. Si une chaîne vide est spécifiée, le message d’événement sera omis de la transcription. `{name}` peut être transmis dans le message et sera remplacé par le nom d’affichage du participant correspondant. Le message par défaut est `{name} has become idle`.
`transcript.eventMessages.participantReturned`	Chaîne	Remplace le message d’événement dans la transcription lorsqu’un participant revient au chat. Si une chaîne vide est spécifiée, le message d’événement sera omis de la transcription. `{name}` peut être transmis dans le message et sera remplacé par le nom d’affichage du participant correspondant. Le message par défaut est `{name} has returned`.
`transcript.eventMessages.chatEnded`	Chaîne	Remplace le message d’événement figurant dans la transcription lorsque le chat est terminé. Si une chaîne vide est spécifiée, le message d’événement sera omis de la transcription. `{name}` peut être transmis dans le message et sera remplacé par le nom d’affichage du participant correspondant. Le message par défaut est `Chat has ended!`
`transcript.displayIcons`	Booléen	Active les icônes d’affichage de message.
`transcript.iconSources.botMessage`	Chaîne	Icône affichée pour les messages du bot, doit être hébergée sur une URL publique.
`transcript.iconSources.systemMessage`	Chaîne	Icône affichée pour un message système, doit être hébergée sur une URL publique.
`transcript.iconSources.agentMessage`	Chaîne	Icône affichée pour un message d’agent, doit être hébergée sur une URL publique.
`transcript.iconSources.customerMessage`	Chaîne	Icône affichée pour un message du client, doit être hébergée sur une URL publique.
`composer.alwaysHideToolbar`	Booléen	Masque la barre d’outils de mise en forme qui inclut des fonctionnalités de mise en forme du texte telles que le gras, l’italique et les options de liste à puces et de liste numérotée.
`composer.disableEmojiPicker`	Booléen	Désactive le sélecteur d’emoji lorsque vous utilisez l’éditeur de texte enrichi.
`composer.disableCustomerAttachments`	Booléen	Empêche les clients d’envoyer ou de télécharger des pièces jointes.
`composer.hide`	Booléen	Masque le compositeur (`true`) ou l'affiche (`false`). Pour basculer entre le compositeur en fonction d'événements (par exemple lorsqu'un agent rejoint), utilisez la `hideComposer` méthode `registerCallback` with. Pour de plus amples informations, veuillez consulter Champs d'extrait de widget pris en charge dans Connect Customer qui sont personnalisables. `document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatInterface.hideComposer(false)`
`footer.disabled`	Booléen	Masquez le pied de page par défaut avec le bouton Mettre fin à la conversation.
`footer.skipCloseChatButton`	Booléen	Ferme directement le widget en cliquant sur le bouton Mettre fin au chat au lieu d’afficher le bouton Fermer.
`endChat.enableConfirmationDialog`	Booléen	Active la boîte de dialogue de confirmation de fin de discussion. Les textes par défaut sont utilisés si `confirmationDialogText` n’est pas fourni.
`endChat.confirmationDialogText.title`	Chaîne	Remplace le titre de la boîte de dialogue de confirmation de fin de discussion.
`endChat.confirmationDialogText.message`	Chaîne	Remplace le message de la boîte de dialogue de confirmation de fin de discussion.
`endChat.confirmationDialogText.confirmButtonText`	Chaîne	Remplace le texte du bouton de confirmation dans la boîte de dialogue de confirmation de fin de discussion.
`endChat.confirmationDialogText.cancelButtonText`	Chaîne	Remplace le texte du bouton d’annulation dans la boîte de dialogue de confirmation de fin de discussion.
`attachment.rejectedErrorMessage`	Chaîne	Remplace le message d’erreur concernant le rejet des pièces jointes au widget de chat.

Avertissement JavaScript est désactivé ou n'est pas disponible dans votre navigateur.

Pour que vous puissiez utiliser la documentation AWS, Javascript doit être activé. Vous trouverez des instructions sur les pages d'aide de votre navigateur.

Conventions de rédaction

Transmission des attributs de contact

Téléchargement de la transcription de votre widget de chat

Personnalisations supplémentaires pour votre widget de chat Connect Customer

Configuration de l’objet de personnalisation

Options et contraintes prises en charge

Note