Update by June 1st! It’s the final month to check your operating systems, browsers, and desktop software. If they're outdated, they may not work with the latest advancements and may make your organization susceptible to online security vulnerabilities. Click here for more information.


Page tree

We have created an API you can insert into your Web site code that lets members enter their phone number, select a carrier, then submit for an invitation to join your texting program. This page contains the HTML code and JavaScript you need to insert to insert.

You have two options when it comes to inserting this functionality into your site.

  1. You can copy and paste the JavaScript to your site from the Web Links page in Access ACS.
  2. You can copy and paste HTML code into your site.

Note

The simplest way to utilize this feature is to use the JavaScript method. If you want to customize the code before you use it, use the HTML method.

The details of how to perform both of these procedures are outlined below.

Inserting the JavaScript

Go to Admin>Options>Web Links. At the bottom of the page, copy the Text Messaging Opt-in Script and place it in the <body> of your HTML page.

Inserting the HTML Code

Copy and paste the following code into the HTML for your site:

<!DOCTYPE html>
<html>
<head>
	<title>Opt-In Example</title>
	<style>
		#lblphone, #phonenumber, #providerlist { margin-right: 10px; }
		.popupcontainer { position: fixed; width: 100%; top: 0px; left: 0px; z-index: 2000; }
		.backdrop { background-color: #ccc; filter: alpha(opacity=70); opacity: 0.7; position: fixed; z-index: 1080; top: 0px; left: 0px; width: 100%; height: 100%; }
		.verticalposition { position: fixed; top: 35%; left: 0px; width: 100%; z-index: 1090; }
		.popupwindow { margin-left: auto; margin-right: auto; width: 280px; padding: 10px; background: white; border: 1px solid black; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; box-shadow: black 5px 5px 5px; -moz-box-shadow: black 5px 5px 5px; -webkit-box-shadow: black 5px 5px 5px; }
		.popupbuttons { text-align: center; margin-top: 5px; }
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready($.ajax({
			url: "http://secure.accessacs.com/access/wsinterface/phoneauth.ashx?req=plist", //url to get providers
			dataType: 'jsonp',
			success: function (result) {
				$.each(result, function (j, prov) {
					var myoption = $("<option value='" + prov.ProviderID + "'>" + prov.ProviderName + "</option>");
					myoption.appendTo("#providerlist");
				});
			}
		}));

		function ProcessOptIn() {
			var MobilePhone = {
				PhoneNumber: $("#phonenumber").first().val(),
				ProviderID: $('#providerlist option:selected').first().val(),
				MySiteNumber: ""//enter your site number here
			};
			$.ajax({
				url: "http://secure.accessacs.com/access/wsinterface/phoneauth.ashx?req=optin", //url to process optin
				dataType: 'jsonp',
				data: MobilePhone, //data from screen 
				success: function (result) {
					$('#output').empty();
					$.each(result, function (i, v) {
						$('#output').append(v);
					});
				}
			});
		}
	</script>
</head>
<body>
	<label id="lblphone" for='phonenumber'>
		Phone Number:</label>
	<input id='phonenumber' type='text' />
	<select id='providerlist'>
		<option value='-1'>select a provider</option>
	</select>
	<input id='btnSendInvite' type='button' value='Send Invite' onclick='ProcessOptIn()' />
	<div id='divoutput' class="popupcontainer" style='display: none;'>
		<div class='backdrop'>
		</div>
		<div class="verticalposition">
			<div class='popupwindow'>
				<span id='output'></span>
				<div class='popupbuttons'>
					<input id='btnphonepopupok' type='button' onclick='popupnoshow()' value='OK' /></div>
			</div>
		</div>
	</div>