How to troubleshoot encoding issues in the chatbox
Fix broken accents, question marks, symbols, or incorrectly displayed characters in the Crisp chatbox by using UTF-8 encoding on your website.
The Crisp chatbox supports international languages, accents, non-Latin alphabets, and emojis through UTF-8. Because the chatbox is injected into your website page, it can inherit the page encoding; if your website still uses a legacy charset, characters inside the chatbox may display incorrectly.
Why encoding issues happen
Modern websites usually use UTF-8, a character encoding that supports accents, non-Latin alphabets, special punctuation, and emojis. Legacy encodings such as Latin-1, ISO-8859-1, ISO-8859-8, or Windows-1252 may not display every character correctly.
When a page declares or serves a legacy charset, browsers may interpret chatbox text through that charset. For example, a word like aparté may appear as apart?, while emojis or non-Latin characters may turn into symbols. Encoding problems often affect only some characters, so the chatbox can look normal until a visitor uses accents, special punctuation, emojis, or another alphabet.
Check the charset used by your page
Encoding can be defined in two places: your HTML and your server response headers. Check both, because a non-UTF-8 HTTP header can still affect the page even when the HTML meta tag looks correct.
Check your HTML charset
Look inside your website <head> section for a charset declaration. The charset should be declared early in the page so browsers can apply it before rendering the content.
Legacy charset example:
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
Recommended UTF-8 charset:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
A shorter modern declaration also works:
<meta charset="utf-8">
Check your HTTP headers
Your web server can also define the page encoding through HTTP headers. If the server sends a legacy charset, the browser may apply it even if your HTML contains a UTF-8 meta tag.
Expected header:
Content-Type: text/html; charset=utf-8
To inspect headers in Chrome:
- Open your website
- Open Developer Tools
- Go to Network
- Reload the page
- Click the main HTML document
- Check Headers → Response Headers → Content-Type
Fix the encoding consistently
Changing the meta tag is not always enough if your files, templates, database content, or server responses still use another encoding. The safest fix is to convert the whole website output to UTF-8.
Convert files and generated content
What to convert or verify:
- HTML files and templates → save them as UTF-8 in your editor or build system
- CMS or framework templates → make sure rendered pages are output as UTF-8
- Database content → check that stored content is encoded and served as UTF-8
- Server responses → configure your server to send
charset=utf-8 - Website cache → clear page, CDN, and browser caches after the change
Test the chatbox again
After converting the website to UTF-8, reload the page and test the chatbox with the characters that were previously broken.
Good test examples:
- Accents →
é,è,à,ç,ñ,ü - Special punctuation →
’,“”,–,€ - Non-Latin alphabets → Chinese, Japanese, Arabic, Cyrillic, or the language used by your visitors
- Emojis → 🙂, ✅, 🚀
If the issue continues, check the rendered page source and response headers again. There may still be a legacy charset coming from a template, reverse proxy, CDN, or server configuration.
Frequently Asked Questions
Still have questions which were not covered in this article? Here is a collection of the most frequently asked questions on this topic.
Is changing the HTML meta tag enough?
Not always. The meta tag tells the browser what charset the page should use, but your actual files, database output, server headers, CDN, or reverse proxy can still serve content with another encoding. Convert the website output to UTF-8 and make sure both the HTML and HTTP headers declare UTF-8.
Why do only some characters look broken?
Legacy charsets can display many basic letters correctly, so the issue may only appear with accents, emojis, special punctuation, or non-Latin alphabets. That is why a page can look mostly normal while specific characters inside the chatbox appear as symbols or question marks.
Can I keep a legacy charset if most of my website works?
It is not recommended. Crisp is designed to work with UTF-8 encoded websites, and UTF-8 is the safest choice for multilingual content, emojis, and modern web applications. Migrating the full website output to UTF-8 avoids recurring character display issues.
Can I fix this by embedding the chatbox in an iFrame?
An iFrame can isolate the chatbox from the parent page in some advanced setups, but it is usually better to fix the website encoding itself. Use an iFrame only if you intentionally need an embedded chatbox layout. For that setup, follow the dedicated guide: How to embed the Crisp live-chat chatbox in an iFrame.
Updated on: 03/05/2026
Thank you!