Table of Contents
This document describes how to create a progress bar widget, to show the values of two attributes from your project.
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.
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
Each recipe has the following sections:
- Ingredients - what you need to complete this project
- Preparation - how to prepare
- Method - step-by-step guide
You will need:
- A website. This recipe will work with any website including free website builders like Wix.com
- The Conducttr widget addon code snippet (found it on GitHub)
- Basic text-ending software to edit the code such as Notepad
- A Conducttr project
Before following the Method section, please do the following:
- Create a Conducttr project
- Create new API entry inside Conducttr (call it Website)
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
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.
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.
The code is here
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.