Dialogflow CX Messenger renderCustomText() and renderCustomCard() functions not rendering text correctly

Question

I am using Dialogflow CX Messenger integration for one of my bots. I'm trying to use these functions. They work well until I use certain special characters such as accented characters. This happens commonly as one of the languages of my bot is spanish.

For example: "This is displayed correctly, until I use spanish characters such as ¿ Á é ñ . Emoji break it too: 🤔"

ends up being displayed as This is displayed correctly, until I use spanish characters such as ¿ à é ñ . Emoji break it too: 🤔

Example of what the output looks like in the messenger itself

This doesn't happen when the message itself comes from Dialogflow, it works fine when a response comes from there. Even emojis work. The issue only appears when I try to use these functions.

My code uses the embed code provided by the Dialogflow CX console, and I added a script that looks like this

window.addEventListener('dfMessengerLoaded', function (event) {
    const exampleText = "This is displayed correctly, until I use spanish characters such as ¿ Á é ñ . Emoji break it too: 🤔";
    dfMessenger = document.querySelector('df-messenger');
    dfMessenger.renderCustomText(exampleText);
});

I have tried using the renderCustomCard() function and ran into the same issue.

Any help is very appreciated! Thanks

Answer 1

I ended up figuring it out, the problem wasn't with the function themselves.

It's just that I was lacking an UTF-8 reference: <meta charset="UTF-8" /> in my HTML. Once this was added in everything worked correctly.

What I found weird is how text sent from Dialogflow itself renders correctly without the need for this tag, which is why I misdiagnosed the problem.