Follow

eCard Widget

Table of Contents

1 Scope

This document describes how to create an eCard web widget that allows your audience to recommend your experience to others.

Like this: http://www.bettercallsaul.com/ecards.php

1.1 What does it do?

Create a web widget to allow your audience to send eCards (personalized emails) to their friends.

Encourage your audience to share content and reach new audience in the process.

As an author you can track the behaviour of your audience, check who are senders and receivers and how many times they have sent or receive an ecard.

1.2 How does it work?

The code snippet will make API Calls to Conducttr

  • The first API Call registers the "referrer"
  • The second API Call registers the "referred"
  • The thirdAPI Call to to trigger the process and sending the eCard to the "referred"

The widget will display an image of the ecards, two inputs and a drop-down list. The audience must fill the first input with their email address, the second with the destination email and select which eCard they want to send from the drop-down list.

 

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 "eCards Widget"
  • 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:

  • 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 edit the line displaying the image of the eCards and replace it with the name and path of your image:

<img src="ecards.jpg" /> 

 

2.3.3 Embed the code at the website 

Don't forget to also upload your eCards 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 Replies, add the content you want add.

Once everything is set up, you can make it public! Everytime an audience member sends an eCard to somebody they will be registered in Conducttr, and added to the Groups "Referrer" and "Referred".

You can also check the Audience attributes "referrer_count" and "referred_count" to see how many times they have sent or received an eCard.

 

2.3.5 Adding or removing eCards (Optional)  

By default the widget and the project is ready to send 4 different eCards if you want to have more or less options you just need to update the widget code.

<select id="ecard" >

<option value="ecard_1"> eCard 1 </option>
<option value="ecard_2"> eCard 2 </option>
<option value="ecard_3"> eCard 3 </option>
<option value="ecard_4"> eCard 4 </option>

</select>

Add as many options as you want or remove them

EG

<select id="ecard" >

<option value="ecard_1"> eCard 1 </option>
<option value="ecard_2"> eCard 2 </option>
<option value="ecard_3"> eCard 3 </option>
<option value="ecard_4"> eCard 4 </option>

<option value="ecard_5"> eCard 5 </option>

<option value="ecard_6"> eCard 6 </option>

</select>

 

Inside your project for each new eCard option:

  • Create an API Call Trigger with the matchphrase unauth/ecard_X (X should be replaced with the eCard number)
  • Attached to the trigger an Email reply with the eCard content.

 

 

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

Comments