Go Back Chat Home

Import Chattable

This tutorial explains how to embed chattable into any website. By the end of this tutorial, you will also learn how to add a name input option for your visiors.

  1. Create an account on chattable.
    1. Complete the verification to activate your account
    2. Login your account
  2. Go to your Dashboard
  3. Under Chat Settings
    1. Click the Select Chat dropdown
    2. Choose your chat code
    Under Chat Settings
    Under Chat Settings
  4. Under Quick Actions, click Embed
    5. Click Embed
    Click Embed
  5. Open your HTML document
  6. Create two files:
    7. index.html - the page to insert the chat box
    chattable.css - for stylesheet file for chat styling
  7. Index.html
    1. Paste the 1st code into the <head></head>
    2. Paste the 2nd code into the <body></body>
  8. chattable.css
    1. Paste the 4th code anywhere in the index.html
    2. You can view the list of all elements modifiable for your chat design
  9. If you want to use one of chattable's pre-made themes, paste the 3rd code anywhere in the index.html and enter the theme name.
  10. For your visitors to have their display name changed, replace the iframe src attribute with:
    1. https://iframe.chat/embed/alternate?chat=YOUR_CHAT_ID