Go back to developers

Embedding

Adding Natterly to your site is easy, anyone can do it! Before you get started with this part of the guide make sure you've signed up for Natterly and have a site token ready. If you haven't done this yet then click here to sign up now.

When testing that your new chatbox works, remember that it only displays when an agent is online and available to chat.

Quick Start

To get started using Natterly all you need are your site token and a few lines of javascript at the end of your document's body tag.

<!-- include the chatbox script -->
<script src="https://cdn.natterly.com/chatbox.js"></script>
<script>
  // create a new chatbox and pass in your site token
  var chatbox = new NatterlyChatbox('<YOUR SITE TOKEN>');
  // render the chatbox
  chatbox.render();
</script>

That's it! That will give you a working Natterly chatbox that your site visitors can use to chat with you. For many this could be all you need, but there are some more advanced options to configure if you'd like to take advantage of all of Natterly's features.

Embedding the chatbox inside of a container element

By default the natterly chatbox will be fixed at the bottom of the screen. For the majority of situations this is the desired behaviour, but if you find that you want to embed it inside of a container element, then it's easy!

<div id="container"></div>
<script src="https://cdn.natterly.com/chatbox.js"></script>
<script>
  var chatbox = new NatterlyChatbox('<YOUR SITE TOKEN>');
  var container = document.getElementById('container');
  // render the chatbox passing in the mount component
  // and specifying that the chatbox should be embedded
  chatbox.render(container, {
    embed: true
  });
</script>

There are a few behavioural differences between a fixed and an embedded chatbox:

  • An embedded chatbox can't be minimized
  • An embedded chatbox will fill the width and height of the container you provide it
  • The default chatbox is fully responsive, and will go fullscreen when opened on mobile. If you go with an embedded chatbox, it is up to you to make the container element responsive in whatever way you see fit.