Progress Bar widget

Table of Contents

1 Scope

This document describes how to create a progress bar widget, to show the values of two attributes from your project.

1.1 What does it do?

Create a widget to show the progress between a two values. For example you can ak your audience to tweet to your account and when the number of interactions reach a certain value publish a new content or make available a new piece of the experience, you can use the widget to show the progress and build excitment and encourage participation.

1.2 How does it work?

The code snippet will make an API Call to Conducttr and retrieve the value of two Project attributes (upper limit and count). The widget will display a progress bar with the percentage between the value of the count and the upperlimt

2 The Recipe

Each recipe has the following sections:

  • Ingredients - what you need to complete this project
  • Preparation - how to prepare
  • Method - step-by-step guide

2.1 Ingredients

You will need:

  • A website. This recipe will work with any website including free website builders like
  • The Conducttr widget addon code snippet (found it on GitHub)
  • Basic text-ending software to edit the code such as Notepad
  • A Conducttr project

2.2 Preparation

Before following the Method section, please do the following:

  • Create a Conducttr project
  • Create new API entry inside Conducttr (call it Website)

2.3 Method

Now you have all the ingredients and you’ve followed the preparation, you’re now ready to configure the project. The steps are:

  • Create two Project attributes (upper limit and count)
  • Create unauth API method in Conducttr.
  • Update the progress widget code (found it on GitHub) snippet with details from your project
  • Embed the code at the website

2.3.1 Create the project attributes

Create two Project attributes of integer type. One will be used to set the upper limit to the progress bar, and the other as the actual value.

2.3.2 Create unauth API method

Inside the previously created API entry, go to the API Methods tab and create a new unauth method. The name of the method should be “unauth/[YOUR-METHOD-NAME]” e.g. unauth/progress.

Then add all the parameters you have created in the previous step.



2.3.3 Grab the code

The code is here 


2.3.4 Update the code

When you open the code snippet, the area that you edit is between two comment lines. The start of the editable area says “Edit the information below” – as shown in the image.


You need to update the following information:

  • CONSUMER KEY – you’ll find this in the Authentication section of the API pop-up

  • PROJECT ID – this is found in the top header bar

  • API METHOD NAME - The API method name.


  • UPPER_LIMIT_ATTRIBUTE_NAME  - The name you gave to the attribute in the api method to the upper limit attribute.


  • COUNT_ATTRIBUTE_NAME - The name you gave to the attribute in the api method to the count attribute.


Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request