> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.crisp.chat/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).
# 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.
||| The Crisp chatbox is compatible with **UTF-8 encoded websites**. Use UTF-8 in both your HTML and HTTP headers whenever possible.
---
# ${color}[#0080dd](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.
---
# ${color}[#0080dd](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.
#### ${color}[#445055](Check your HTML charset)
Look inside your website `` 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:__
```html
```
__Recommended UTF-8 charset:__
```html
```
A shorter modern declaration also works:
```html
```
#### ${color}[#445055](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:__
```http
Content-Type: text/html; charset=utf-8
```
__To inspect headers in Chrome:__
1. Open your website
2. Open **Developer Tools**
3. Go to **Network**
4. Reload the page
5. Click the main HTML document
6. Check **Headers → Response Headers → Content-Type**
|| If your HTML and HTTP headers disagree, make them consistent and use **UTF-8** in both places.
---
# ${color}[#0080dd](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.
#### ${color}[#445055](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
#### ${color}[#445055](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.
---
# ${color}[#0080dd](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.*
###### ${color}[#F08820](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.
###### ${color}[#F08820](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.
###### ${color}[#F08820](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.
###### ${color}[#F08820](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](/en/article/how-to-embed-the-crisp-live-chat-chatbox-in-an-iframe-bkfh98/).