Follow

Add Custom fields to a Solo Signup Widget

Table of Contents

 

1 Scope

This document describes how to create a personalized solo signup, adding custom fields to the default Solo SignUp Widget.

1.1 What does it do?

Create a custom signup widget and get more info from your audience, store these values in attributes or move them into groups to personalize the experience from the very beginning.

1.2 How does it work?

The code snippets we provide ( you can find it on GitHub) must be embedded into a web page along with the Solo Signup widget code where it will add custom fields. 

The code will make an API Call to Conducttr before the actual registration process. It's possible to use this call to set the values of one or more attributes or fire an API Call trigger and publish content or move the audience to a specific group.

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
  • 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:

  1. Create a Conducttr project
  2. Create a new Solo Signup widget to collect the audience phone or the audience email
  3. 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:

  1. Create one or more attributes
  2. Create unauth API method in Conducttr.
  3. Create unauth API triggers in Conducttr that will fire when the video calls them
  4. Generate the HTML code of the Signup Widget, and append the Widget addon at the end (Here)
  5. Update the signup widget code snippet with details from your project
  6. Embed the code at the website
  7. Check log to see that video is calling Conducttr as expected

2.3.1 Create one or more attributes

Create as many attributes as you want. You can create Project or Audience attributes.

It is also possible to create Group attributes, but we will need to add the group_id to code snippet.

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/set_attribute.

Then add all the parameters you have created in the previous step and you want to get from the signup widget.

2.3.3 Create unauth API triggers

If you want you can create an unauth API trigger with a matchphrase, this will fire when someone registers. You can the value of an inout as a matchphrase, and then attach a Content Action or Logic Action to this trigger.

 

2.3.4 Generate the HTML code of the Signup Widget 

In the widget pop-up click the "Generate HTML" button. Paste the code into your website, and copy the code from the widget-addon snippet at the end.

2.3.5 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

  • METHOD NAME - The API method name and/or the API Trigger matchphrase

 

For each attribute you need to add an input inside the form (anywhere between the <form> and </form> tags)

EG:

<li><label for="attribute_integer" >Integer: </label><input type="number" name="attribute_integer" id="attribute_integer"  /></li>

 <li><label for="attribute_single_line" >Single-Line: </label><input type="text" name="attribute_single_line" id="attribute_single_line"  /></li>

<li><label>Boolean: </label>

<input type="radio" name="option_true" id="option_true" value="1">True

<input type="radio" name="option_false" id="option_false" value="0">False

</li>

 

And then you need to add it to the Call to Conducttr, in the widget code snippet (after the line form.onsubmit = function())

One line to get the value from the previously created input

e.g.

var attribute_integer = document.getElementById('attribute_integer').value;

And one line to add that value (along your Conducttr's consumer key and the audience email/phone) to the call to Conducttr:

eg

var attribute_values = "consumer_key="+CONDUCTTR_CONSUMER_KEY;

attribute_values+="&audience_email="+audience_email;

attribute_values+="&integer="+attribute_integer;

 

This is a complete example of sending three attributes (a text, a number and a boolean):

 

 

var attribute_integer = document.getElementById('attribute_integer').value;

var attribute_single_line = document.getElementById('attribute_single_line').value;

if (document.getElementById('option_true').checked) var attribute_boolean = 1;

else if (document.getElementById('option_false').checked) var attribute_boolean = 0;

else var attribute_boolean = null;

                                 

var attribute_values = "consumer_key="+CONDUCTTR_CONSUMER_KEY;

attribute_values+="&audience_email="+audience_email;

attribute_values+="&integer="+attribute_integer;

attribute_values+="&single_line="+attribute_single_line;

attribute_values+="&boolean="+attribute_boolean;

 

After these changes you can save your website and try it. Check your Projects Activity Feed to check if Conducttr is correctly receiving and API Call just before the SignUp Trigger fires.

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

Comments