Embedding Instructions

Congratulations! Your chat has been created on our end successfully. Next, you can go to your dashboard to manage your new chat. Follow the instructions below to embed your chat in your website and start using it immediately.


1. Add the JS Library. Open the HTML document you want to embed your chat into, then copy/paste this snippet into the head element. (After <head> but before </head>)

<script src="https://chattable.neocities.org/scripts/main.min.js"></script>

2. Add the iframe. In the same HTML document, add the chat by copy/pasting this snippet into the body element (After <body> but before </body>)

Loading Custom Code...

3. Customize the chat. If you want to use your own CSS skip this step. To use a theme, choose one you like from the demo page. Paste this snippet anywhere in your body element, right below the iframe is preferrable.

<script> chattable.initialize({ theme : "Retrowave Red" }); </script>

Be sure to change the text in quotation marks to the name of the demo you like. It is NOT case sensitive.

4. To Customize the chat with CSS, create a file in the same folder called "chattable.css". Then, copy/paste this snippet anywhere in your body element, right below the iframe is preferrable.

<script> chattable.initialize({ stylesheet : "chattable.css" }); </script>

Et viola!

You now have a live chat on your website! Don't forget you can manage all the chats you've created on your dashboard.