Install the tracking code

In this section, we will see how to install Butterflive on your server. Please note you do not need to take these steps if you are using a Butterflive plugin (like the Drupal plugin for Butterflive).

Prerequisite :

  • Having an access to the HTML code of your web-server,
  • Having a Butterflive key.

Note: To get your Butterflive key, you just need to subscribe to the service. The key will be sent to you by mail. If you lost your key, you can find it on your Butterflive's account home page.

Butterflive tracking code

The Butterflive tracking code is a piece of Javascript code that you include on each web page of your site you want to monitor. All user tracking information that you can view in Butterflive depends on it, thus this is the first step to take care of.

There are 2 ways you can load the tracking code: the Asynchronous way, or the Synchronous way. We recommend using the asynchronous tracking. Using this technique, Butterflive will be loaded after your page is displayed, and it won't cause any delay in rendering the web page.
(If you prefer, you can check the synchronous loading at the end of this document.)

Asynchronous loading

The Butterflive tracking code is a piece of Javascript that must be put on every page of your site. We recommend putting this code at the end of the <body> tag (so just before </body>), but you can also put it at the end of the <head> tag if you prefer.

Butterflive Chargement Asynchrone 
      <script type="text/javascript">
        bflOptions = {
          key: "Your butterflive key",
          src: (("https:" == document.location.protocol) ? "https://secure" : "http://api") + ".butterflive.com/butterflive.js"
        };
 
        (function() {
          var btf = document.createElement('script'); btf.type = 'text/javascript'; btf.async = true;
          btf.src = bflOptions.src;
          var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(btf, s);
        })();
      </script>
 
Do not forget to change "Your butterflive key" by the key you received when you subscribed for your Butterflive account.

If you do not have a Butterflive key yet, you can get one for free on the subscription page.

The bflOptions variable contains all the options that will be used by Butterflive. In the example above, we have only provided the 2 compulsory parameters but there are many more.
We will see those parameters in the following articles. You can also see the full list of parameters in the Startup Parameters API Reference

Authorizing your sites to use your Butterflive key

Out of security measures, only the domain name you explicitly authorize can use your Butterflive key. On your account home page, you can manage authorized domains. Click on the "Add another site / domain name" to register your website's domain name.

Testing

Once the snippet of code is present in your page, you have done enough to start testing. Just install the Butterflive widget on your computer. Once this is done, you should see users connecting to your site. And you can already start chatting with them! Just try!
Note : you can learn more about the Butterflive console in the user guide.

Where to go next?

This basic installation is enough to get you started with Butterflive. The next thing you will want to do is add a chat button in your website so your visitors can contact you directly. You can keep learning how to customize the Butterflive Tracker Code to provide extra tracking information, or how to enable co-browsing between your visitors and your agents.

Alternative solution: synchronous loading

If you prefer, you can use synchronous loading to start Butterflive before your web page. You should add the code below in the <head> tag of your web page.

          <script src="http://api.apideo.com/apideo.js" language="JavaScript" type="text/javascript"></script>
          <script src="http://api.butterflive.com/butterflive.js" language="JavaScript" type="text/javascript"></script>
 
          <script language="JavaScript" type="text/javascript">
            Butterflive.onDomReady(function() {
              Butterflive.init('My Butterflive key');
            });
          </script>
 
 

In the snippet of code, you will replace the 'My Butterflive key' part with your own Butterflive key. If you do not have a Butterflive key yet, you can get one for free on the subscription page.