Why do accent encoding look wrong on my chatbox?
The Crisp chatbox has been built for international locales support. It supports 50+ languages, in a wide range of alphabets. However, on some websites you may see weird accents in your chatbox.
The Crisp chatbox is only compatible with UTF-8 encoded websites. As the chatbox is directly included in your DOM (ie. in your website page / document), it inherits from your website encoding set. If you are not using UTF-8, or a derivative of UTF-8, you may see weird Latin accented characters, eg. in French "aparté" could be shown as "apart?" (the "é" letter cannot be displayed in the correct encoding).
Remember: the Crisp chatbox is only compatible with UTF-8 encoded websites.
Modern websites will not have this problem, as UTF-8 is the default character set used by Web developers nowadays. However, websites that are a bit older may inherit a legacy, non-UTF-8 character set that is forced in the website <head /> section, or in the HTTP headers sent by your server.
You're looking to check HTML (1) and HTTP (2) headers, as they are both used by browsers for page rendering and could both affect independently the Crisp chatbox accents.
Usually, the reason is that you have this in your website <head /> section (eg. for ISO-8859-8):
Where it should rather be UTF-8:
Check the HTTP headers sent by your Web server, when it serves an HTML page.
If your HTTP server properly serves content as UTF-8, you would see the following HTTP header:
You can check the HTTP headers by opening eg. Google Chrome Developer Tools, that can be found in "...", then "More Tools", then "Developer Tools".
As the encoding applies to the whole page and cannot be changed on a sub-element of the DOM (unfortunately there is no HTML standard for that), you will need to fix this another way.
There are 2 ways of fixing this (ranked from best to worst):
Convert all your pages to UTF-8, and declare UTF-8 as your encoding set in the HTML <head /> section of your site (this may be tedious if you have many static pages and legacy dependencies, however it's by far the best solution; plus it is future-proof)
Include Crisp in an iframe HTML element, which has its own encoding set to UTF-8 (this is not recommended, as it breaks MagicBrowse, LiveAssist and LiveDebug — it is also the reason we don't include it in an iframe by default)
The Crisp chatbox is only compatible with UTF-8 encoded websites. As the chatbox is directly included in your DOM (ie. in your website page / document), it inherits from your website encoding set. If you are not using UTF-8, or a derivative of UTF-8, you may see weird Latin accented characters, eg. in French "aparté" could be shown as "apart?" (the "é" letter cannot be displayed in the correct encoding).
Remember: the Crisp chatbox is only compatible with UTF-8 encoded websites.
Modern websites will not have this problem, as UTF-8 is the default character set used by Web developers nowadays. However, websites that are a bit older may inherit a legacy, non-UTF-8 character set that is forced in the website <head /> section, or in the HTTP headers sent by your server.
Where can I find my character encoding?
You're looking to check HTML (1) and HTTP (2) headers, as they are both used by browsers for page rendering and could both affect independently the Crisp chatbox accents.
1. In the HTML header
Usually, the reason is that you have this in your website <head /> section (eg. for ISO-8859-8):
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-8">Where it should rather be UTF-8:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">2. In the HTTP headers
Check the HTTP headers sent by your Web server, when it serves an HTML page.
If your HTTP server properly serves content as UTF-8, you would see the following HTTP header:
Content-Type: text/html; charset=utf-8You can check the HTTP headers by opening eg. Google Chrome Developer Tools, that can be found in "...", then "More Tools", then "Developer Tools".
How to fix my character encoding?
As the encoding applies to the whole page and cannot be changed on a sub-element of the DOM (unfortunately there is no HTML standard for that), you will need to fix this another way.
There are 2 ways of fixing this (ranked from best to worst):
Convert all your pages to UTF-8, and declare UTF-8 as your encoding set in the HTML <head /> section of your site (this may be tedious if you have many static pages and legacy dependencies, however it's by far the best solution; plus it is future-proof)
Include Crisp in an iframe HTML element, which has its own encoding set to UTF-8 (this is not recommended, as it breaks MagicBrowse, LiveAssist and LiveDebug — it is also the reason we don't include it in an iframe by default)
Updated on: 13/06/2022
Thank you!