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.
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.
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: