Opt-in Form on the website
Data Fields
| One of phone or email are required | |
| phone | One of phone or email are required |
| first_name | |
| last_name | |
| birth_date | String in the form 'YYYY-MM-DD' |
| city | City. country_code is required if included. |
| country_code | 2 letter country code or full country name |
| postal_code | Postal Code in a given country. country_code is required if included |
| province | Province name. country_code is required if included |
| ip_address | Will take REMOTE_ADDR if omitted |
| device_id | Hardware reference if mobile app is used |
| device_network | one of ios/android |
| field_xxxx | Custom field value for configured custom fields |
| is_unique_activity | true/false - enforce unique participation in the campaign |
| campaign_name | Campaign Connection, if call is meant to be associated with campaign |
| page_tab_id | Campaign Connection, if call is meant to be associated with campaign. This field should be used instead of the campaign_name field if possible and will supersede it if filled |
| tag_name | CRM Tag to apply to the user. Can be specified multiple times in the payload |
| tag_names | As alternative to tag_name, tags can be supplied as comma separated list |
| business_id | Opt-in to a specific business, if applicable |
| idol_name | Idol to associate with the user |
This page provides an simple HOWTO on integrating javascript driven opt-in form into your website
Fully functional example on embedding signup form into your website, which will be fully integrated into Tradable Bits CRM
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/underscore@1.13.6/underscore-umd-min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://tradablebits.com/tbits-sdk.js"></script>
<style>
form.was-validated input.form-control:invalid {
border: 1px solid red;
}
.dob-column {
flex: 30%;
}
</style>
<script type="text/javascript">
let apiKey = "b9a18588-dfd3-4a20-94ef-16c70d571be4";
$(document).ready(function(){
$(".signup-btn").click(signupModal);
});
function signupModal(){
let template = $("#signup-template").html();
$("#modal-area").html(template).toggle();
$("#send-signup-btn").click(sendSignup);
return false;
}
function callback(res){
console.log("Success:", res);
}
function errorCallback(res){
console.log("Error:", res);
}
function sendSignup(){
let form = $('#tbits-form')
const valid = form.get(0).checkValidity()
form.toggleClass('was-validated', !valid);
if (!valid){
return false
}
let firstName = form.find("input[name=first_name]").val();
let lastName = form.find("input[name=last_name]").val();
let email = form.find("input[name=email]").val();
let phone = form.find("input[name=phone]").val();
let age_day = form.find("input[name=age_day]").val();
let age_month = form.find("input[name=age_month]").val();
let age_year = form.find("input[name=age_year]").val();
let birth_date;
if (age_year && age_month && age_day) {
birth_date = `${age_year}-${age_month}-${age_day}`;
}
let data = {first_name: firstName, last_name: lastName, email: email, network: "register", is_subscribed: true,
is_phone_subscribed: true, phone: phone, birth_date: birth_date, tag_name: 'likes-cats'};
TBITS.init(apiKey);
TBITS.optInFan(data)
.then(callback)
.catch(errorCallback);
return false;
}
</script>
<script type="text/template" id="signup-template">
<div class="well">
<form class="form" id="tbits-form">
<label class="control-label"> First Name <span style="color:red">*</span> </label>
<input type="text" class="form-control" name="first_name" required minlength="2"/>
<label class="control-label"> Last Name <span style="color:red">*</span> </label>
<input type="text" class="form-control" name="last_name" required minlength="2"/>
<label class="control-label"> Email <span style="color:red">*</span> </label>
<input type="text" class="form-control" name="email" required minlength="6"/>
<label class="control-label"> Phone </label>
<input type="text" class="form-control" name="phone" />
<label class="control-label"> Birth Date </label>
<div style="display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; gap: 10px">
<div class="dob-column"><input placeholder="DD" type="number" min="1" max="31" minlength="2" maxlength="2" class="form-control" name="age_day" /></div>
<div class="dob-column"><input placeholder="MM" min="1" max="12" minlength="2" maxlength="2" class="form-control" name="age_month" /></div>
<div class="dob-column"><input placeholder="YYYY" type="number" min="1990" minlength="4" maxlength="4" class="form-control" name="age_year" /></div>
</div>
<br/>
<a href="#" class="btn btn-primary" id="send-signup-btn"> Signup </a>
</form>
</div>
</script>
</head>
<body class="container">
<h1> Signup Example </h1>
Click on Signup to signup<br/>
<a class="signup-btn btn btn-default" href="#"> Signup </a>
<br/>
<br/>
<div id="modal-area" style="display:none;"></div>
</body>
</html>
