Follow

Referral Widget

Table of Contents

1 SCOPE

This document describes how to create a "Referral" web widget that allows your audience to refer you and share your content in the social media

 

1.1 What does it do?

Create a web widget to allow your audience to refer you and your work through the social media. Reach more audience and build a mailing list.

 

1.2 How does it work?

The code snippet will create a button, when the audience clicks in the widget will be displayed with a textarea and three buttons to share on Twitter, Facebook and Email.

Twitter Share:

When someone clicks it an API Call ("twitter_share") will be sent to Conducttr so you can track your audience behaviour, and a Twitter pop-up will appear so they can post it to their timelines.

Facebook Share:

When someone clicks it an API Call ("facebook_share") will be sent to Conducttr so you can track your audience behaviour, and a Facebook pop-up windoe will appear so they can post it to their wall.

Email share:

When someone clicks it, a new form will appear. They can fill the "FROM" and the "To" email address and send an email to sometone.

When they click an API Call ("email_share") will be sent to Conducttr, registering them in your project and sending an email to them.

 

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

2.2 Preparation

Before following the Method section, please do the following:

  • Create a Conducttr project using the Template "Referral 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"
  • Configure the Narrator's email account.

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)
  • Create the logic to send the email.
  • Count the clicks (optional)
  • Update the Referral Widget code snippet with details from your project
  • Embed the code at the website
  • Check log to see that video is calling Conducttr as expected

2.3.1 Grab the code

The code is here 

2.3.2 Create the logic to send the email

Create a new API Call trigger with the matchphrase :

unauth/email_share ( 3rdparty_email |parse('email_address') into audience.3rdparty.accounts.email| ) && ( email_body |parse('all_chars') as email_body|)

This will parse the API Call from the widget, registering the sender and the 3rdParty and it will parse the text type into the widget's body

 

 Then attached to this trigger create a new Email. In the Content Details panel, go to the Header tab and in the To drop-down menu select Referenced Audience(3rdParty) 

In the Body tab write the content of your email. You can use the following smartwords

|audience.sender.accounts.email| = the email of the sender/referrer

|email_body| = the content of the message write by the audience using the widget

 

2.3.3 Count the clicks (Optional)

If you want to count the number of clicks you can do it easily storing the value inside an attribute and increment it each time someone clicks

Create the attributes

Go to the Attibutes panel, select Project as the entity.

Create three integer attributes call them 

"Facebook Share Clicks count"

"Email Share Clicks count"

"Twitter Share Clicks count"

 

Create the API triggers.

Create two unauth  API Call trigger (the email one is already created) with the matchphrases

“unauth/facebook_share"

"unauth/twitter_share"

 

Create the Logic Actions

Then attached to each trigger ( the email_share trigger as well)  create a new Logic Action to increment our Project attributes  by 1 each time someone clicks

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

 

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.

  • FACEBOOK_LINK: the url for the Share to Facebook.
  • TITLE: The Title of the widget.
  • IMAGE_URL: the path for the image to be displayed in the widget
  • SUBTITLE: The subtitle of the widget, displayed below of the image
  • TEXT: The default text for the text area
  • SUCCESS_TEXT: The text to be displayed after sending the email

 

2.3.5 Embed the code at the website 

Don't forget to also upload your image

 

 

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

Comments