In Butterflive, most of the configuration is done in the administration interface. From this interface, you can choose a design, change text labels, etc...

Having a nice graphical interface is the most convenient way to let you quickly configure Butterflive. However, there are cases where the graphical interface might not be enough. For instance, you might want to change the theme used depending on the page your visitor is browsing. Or you might want to change the text displayed to the visitor based on the page he is visiting.

Hopefully, you will never be restricted by the Butterflive administration interface. Indeed, you can overload any parameter that you set in the administration interface using Javascript code.

To overload a parameter, you just have to use the "config" parameter. Here is a sample:

    <script type="text/javascript">
      bflOptions = {
        key: "Your butterflive key",
        src: (("https:" == document.location.protocol) ? "https://secure" : "http://api") + ".butterflive.com/butterflive.js",
        config: {
          incite: {
            labels: {
              title: "My title"
            }
          },
          design: {
            titleFont: {
              color: "ff0000"
            },
            bgColor: "ffff00"
          }
        }
      };
 
      (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>
 

In this short sample, we are changing the title of the "Incite" popup, and we are changing the title font color to red, and the Incite background color to yellow.
The list of all parameters is available in the Reference API startup options