Custom HTML code
Despite the fact that the standard kit covers 80% of user needs in terms of customizing the chat window appearance, if you want to obtain an absolutely unique design of said window on your site, you can take advantage of the ability to upload a customized window layout into the system.
No special knowledge needed apart from the HTML markup language syntax which is in one way or another used for describing all Internet pages. If you are familiar with HTML and can draw an attractive window, you can do the work by yourself. Otherwise, you can commission chat window design or layout construction to a web designer or a studio.
You will need to create 2 HTML files for uploading into the system. The first one should contain the chat window code, while the second one the offline form.
There are certain requirements to the files. Since it is not a site page but only a chat window, files have structural differences when compared to usual HTML pages.
- UTF-8 encoding
- The first line does not need to define the document type (doctype).
- The file should not contain the sections head or body. The files start with the <DIV> tag and end with the </DIV> tag. The div element itself is the external container of the chat window.
- No <STYLE> or <SCRIPT> blocks should be present. Scripts and styles for the chat window should be linked via the site pages.
- Key elements of the chat window should meet certain requirements.
In order to upload own HTML code for the chat window:
- In the Website -- Widget themes section create a new theme if you have not yet made one
- In the "General" section select HTML-code upload. Also select the chat window type and its location on the screen if the selected type is not "Embedded".
- In the Settings block check the corresponding boxes if you need the agent photo displayed, as well as the chat message sending time.
- In the Sound block check the Enable box if you need audio notification for the visitors when a new message arrives.
- In the Code upload block press the Choose widget HTML-file button.
- In the ensuing prompt box select the file with your code and upload it.
- Press the Save button
- Select Offline form in Component dropdown menu and repeat the steps 5-8 for the offline form.