<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>

</head>

<body>

  <div class="wrapper">


    <div class="header">
      <h1 class="title">PureText</h1>
    </div>
    <div class="content">
      <div class="info">
        <p>
          <a href="http://puretext.us" target="_blank">Text Messaging API</a>
        </p>
      </div>
      <script src="https://embed.runkit.com" data-element-id="my-element"></script>
      <div class="page-content">

        So let's get started, to do a quick POC you'll need:
        <p></p>
        <ol style="font-size: 16px;line-height: 30px;">
          <li>An API token key here&nbsp; (free API token&nbsp;<a target="_blank" href="https://crm.puretext.us/signup">2 Way Text Messaging API</a>)&nbsp; &nbsp;</li>
          <li>A 'From' number through your SMS gateway (Get a free one&nbsp;<a href="https://crm.puretext.us/signup" target="_blank">here</a>)&nbsp; &nbsp;</li>
          <li>npm install puretext</li>
        </ol>
        <p><em>&nbsp;Copy Paste the following code in your IDE and replace the API Token and From Number values from the ones in your dashboard</em></p>


        <!-- anywhere else on your page -->
        <div id="my-element">
          const puretext = require('puretext'); 
          require('request'); 
          
          let text = { 
            // To Number is the number you will be sending the text to. 
            toNumber: '+X-XXX-XXX-XXXX', 
            // From number is the number you will buy from your admin dashboard 
            fromNumber: '+X-XXX-XXX-XXXX', 
            // Text Content 
            smsBody: 'Sending SMS using Node.js', 
            //Sign up for an account to get an API Token 
            apiToken:'XXXXXXX' 
          }; 
          
          puretext.send(text, function (err, response) { 
            if(err) console.log(err); 
            else console.log(response) 
          })
        </div>
      </div>
    </div>
    <div class="footer">
      <span class="copyright">Frontend.LA © </span> —
      <a href="http://frontend.la/i/node.js/los-angeles,ca" target="_blank" class="link">Frontend Jobs LA</a>
      <a href="http://frontend.la/employers" target="_blank" class="link">Applicant Tracking System</a>
      
    </div>
  </div>
</body>

</html>
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 300;
  line-height: 34px;
  letter-spacing: .02em;
}

a {
  color: white;
  text-decoration: none;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  float: left;
  display: block;
  font-family: "Raleway", sans-serif;
  font-size: 1rem;
}

body {
  background: -webkit-linear-gradient(
    90deg,
    #FF4E50 10%,
    #F9D423 90%
  ); /* Chrome 10+, Saf5.1+ */
  background: -moz-linear-gradient(
    90deg,
    #FF4E50 10%,
    #F9D423 90%
  ); /* FF3.6+ */
  background: -ms-linear-gradient(90deg, #FF4E50 10%, #F9D423 90%); /* IE10 */
  background: -o-linear-gradient(
    90deg,
    #FF4E50 10%,
    #F9D423 90%
  ); /* Opera 11.10+ */
  background: linear-gradient(90deg, #FF4E50 10%, #F9D423 90%); /* W3C */

  color: #fff;
}

.page-content {
  background: white;
  max-width: 800px;
  margin: 0 auto;
  color:#222222;
  text-align:left;
    padding:10px 30px;
}

.page-content a {color:blue}

.wrapper {
  padding: 1em 2em;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  float: left;
  display: block;
  text-align: center;
}

.wrapper .header {
  height: auto;
  margin-top: 1em;
  width: 100%;
  float: left;
}
.wrapper .header .title {
  color: #fff;
  font-size: 2.875em;
}
.wrapper .content {
  height: auto;
  margin-top: 0;
  width: 100%;
  float: left;
}
.wrapper .content .info p {
  color: #fff;
  font-size: 1.25em;
}
.wrapper .content .button {
  margin-top: 3em;
}
.wrapper .footer {
  height: auto;
  margin-top: 1em;
  width: 100%;
  float: left;
  bottom: 1em;

  font-size: .9rem;
}
.wrapper .footer .link {
  color: #fff;
  text-decoration: none;
}
.wrapper .footer .link:hover {
  color: #fff;
}
.wrapper .footer .link:hover:after {
  color: #fff;
}
.wrapper .footer .link:not(:last-child):after {
  content: ' - ';
  font-weight: bold;
  color: #fff;
}
.wrapper .btn {
  text-shadow: 0 0.08em 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 1em;
  display: inline-block;
  margin: auto .5em;
  padding: .5em 1.2em;
  border: .1em solid;
  border-radius: 5px;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 0.08em 0 rgba(0, 0, 0, 0.1);
}
.wrapper .btn:hover {
  border-color: #fff;
}

@media all and (max-width: 40em) {
  html, body {
    font-size: .85rem;
    line-height: 22px;
  }
}
@media all and (max-width: 60em) {
  html, body {
    font-size: .9rem;
    line-height: 24px;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.