BugPlug Implementation Documentation

Initial Setup
Learn how to quickly get up and running.

BugPlug is an easy-to-install widget that allows you, your team and/or users to send documentation to an organized Trello board. In order to implement, you'll need to be able to access, edit, and redeploy the source code of any pages you'd like to add BugPlug to. If you're able to do that, read on! If not, send this page to the developer you'd like to implement BugPlug.

Step 1 Sign Up and Create a Board

In order to use BugPlug you’ll need to have an account with us. The only way to do this is to jump on over to the sign up page and create an account. You'll also need a Trello account. If you're not familiar with Trello; it's a digital Kanban board designed to visually managed projects—like your projects bug resolution!

Once you're ready to go, login to your BugPlug account. Follow the setup wizard which includes connecting your Trello account to BugPlug, naming your bug board, and authorizing the domains you'll use BugPlug on.

Note: In order to secure your bug board, BugPlug uses domain authentication to make sure bugs are only submitted from your authorized sites. Use the domain name field (omatum.com NOT http://omatum.com/thing). Forgetting to add your domain is the number one error during setup.
Step 2 Get Your API Key

Once you've created your board, copy your newly-generated public API key from your dashboard.

Step 3 Stick the BugPlug Code On Your Site

BugPlug works by injecting a bit of code onto your site. On every page where you’ll want to track bugs, you’ll need to include the following widget code before the closing body tag of your page. Don't forget to replace YOUR API KEY with...your API key.

              
...your code
<!-- Bring in the BugPlug Code -->
<script src="//widget-cdn.bugplug.omatum.com/bp.js"></script>
<script>
  //Initialize the Widget ---
  _bugplug.init({"API_KEY":"YOUR API KEY"});
</script>
</body>
              
Step 4 Watch Your Trello Board for the Sweetness

Deploy your changes to your production environment and that's it! You're now plugged into BugPlug and can start capturing user feedback. Continue reading to see more examples of implementation that extend the functionality of BugPlug.

PLEASE NOTE: This feedback will always come into the same List. You can rename or move the list but if you delete it you will need to re-initialize the board from your dashboard.
Configuration
Learn how to alter the appearance and functionality of the widget.
Setting Configuration Variables Code Example

When you initialize the widget you can pass additional options to do all sorts of neat stuff.

PLEASE NOTE: These options MUST be set when you intialize the widget.

... your code
<script src="//widget-cdn.bugplug.omatum.com/bp.js"></script>
<script>
  //Set config options
  var _bpopts ={
    "API_KEY" : "YOUR API KEY",
    "bg_color" : "rgb(0,0,0)", // Can be any rgb hex value | Defaults to BP Yellow
    "trello_link" : true, // Display a link to your Trello board when form is submitted
    "screen_anchor" : "left" // Set the BugPlug screen position, either left or right
  }
  //Initialize the Widget ---
  _bugplug.init(_bpopts);
</script>
</body>
            
INIT() Full List of Options

Send these options, as a group, as a key-value-pair when initializing the BugPlug widget.

Arguments
API_KEY
Required
Your BugPlug API key, used to connect and validate your account
bg_color
A background color for the circle of the BugPlug widget.
String: Accepts any valid rgb or hex color code.
Defaults to rgb(249,221,101)
trello_link
Whether or not to include a link to your Trello board upon form submission.
Boolean: Accepts true or false
Defaults to true
screen_anchor
Sets position of the widget on the screen.
String: Must be "left" or "right".
Defaults to "right"
Custom Variables
Learn how to send additional variables alongside user submitted feedback.
SETTING CUSTOM VARIABLES CODE EXAMPLE

At any point you can submit additional variables to the BugPlug widget.

PLEASE NOTE: These must be set as valid key-value-pairs.
PLEASE NOTE: Variables set with the same key name will overwrite previous variables with that name.
              
... your code
<!-- Bring in the BugPlug code -->
<script src="//widget-cdn.bugplug.omatum.com/bp.js"></script>
<script>
  // Initialize the Widget ---
  _bugplug.init({"API_KEY":"YOUR API KEY"});

  // Pass a custom variable, like a User's name
  _bugplug.addVar({"user_name": $$globals.user_name});

  //Pass another custom variable
  _bugplug.addVar({"browser":navigator.userAgent});

  //Some other part of your code
  function some_function()
  {
    //Do a thing
    a_thing(with_stuff);
    _bugplug.addVar({"user_action":"did a thing"});
  }
</script>
</body>