Follow

Media Gift Widget

Table of Contents

1 SCOPE

This document describes how to create a "Media Gift" web widget that allows your audience to register in your project using their email in order to receive content.

 

1.1 What does it do?

Create a web widget to allow your audience to signup and receive content. Grow your audience and build a mailing list.

 

1.2 How does it work?

The code snippet will make an API Call to Conducttr ( "mediagift" by default ) registering the audience in your project, this will make a reply email to be sent to them.

The widget will display an image. When the audience clicks in the widget they will see a form.  The audience must fill the form with their email address and click the submit button.

 

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 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
  • An email account.

2.2 Preparation

Before following the Method section, please do the following:

  • Create a Conducttr project using the Template "Media Gift Widget"
  • Create new API entry inside Conducttr (call it Website)
    • If you are using the template just enter the "Website" API entry, go to the Authentication tab and click "Reset my Consumer Key and Consumer Secret"

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:

  • Grab the code (found it on GitHub
  • Update the progress widget code snippet with details from your project.
  • Embed the code at the website
  • Update your Conducttr's project

2.3.1 Grab the code

The code is here 

2.3.2 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

You should also edit the line, in the style section,  displaying the image for the background and replace it with the name and path of your image:

#widget{

background-image: url('mediagift.png');
background-size: cover;

Customizing texts:

You can change all the style and texts of the widget. These are some of them and the lines you have to find and change to customize your widget.

  • Call to action:

<div class="centered">
Click to Download
</div>

  • Success text:

<div id="success">Check your Inbox for the Download</div>

 

 

2.3.3 Embed the code at the website 

Don't forget to also upload your background image

 

2.3.4 Update your Conducttr's project

Now you have the widget up and running you just need to update some details inside your project.

  • Add and configure your email address (Narrator character)
  • Edit the Email Reply, add the content you want add.

Once everything is set up, you can make it public! Everytime an audience member sends uses the widget they will be registered in Conducttr, and added to the Group "Clicked".

You can also check the Audience attribute "clicks_count" see how many times each audince member have used the widget, and the Project attribute "clicks_count" to check how many times the widget have been used in total.

 

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

Comments