Opt-in Form on the website
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://tradablebits.com/static/bootstrap/css/bootstrap.min.css"/>
<script type="text/javascript" src="https://tradablebits.com/static/jquery/jquery-3.6.1.min.js"></script>
<script type="text/javascript" src="https://tradablebits.com/static/js/libs/underscore.js"></script>
<script type="text/javascript" src="https://tradablebits.com/static/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://tradablebits.com/tbits-sdk.js"></script>
<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 firstName = $("input[name=first_name]").val();
let lastName = $("input[name=last_name]").val();
let email = $("input[name=email]").val();
let phone = $("input[name=phone]").val();
let data = {first_name: firstName, last_name: lastName, email: email, network: "register", is_subscribed: true,
is_phone_subscribed: true, phone: phone, 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">
<label class="control-label"> First Name </label><input type="text" class="form-control" name="first_name" />
<label class="control-label"> Last Name </label><input type="text" class="form-control" name="last_name" />
<label class="control-label"> Email </label><input type="text" class="form-control" name="email" />
<label class="control-label"> Phone </label><input type="text" class="form-control" name="phone" />
<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>
