feat(templates): add Opt In Builder template

.eslintrc.js

@@ -14,15 +14,15 @@ module.exports = {
     ecmaVersion: 2018,
   },
   rules: {
-    'prettier/prettier': 'allow',
-    'import/no-extraneous-dependencies': 'allow',
+    'prettier/prettier': 1,
+    'import/no-extraneous-dependencies': 1,
     'no-console': 0,
-    'sonarjs/no-duplicate-string': 'allow',
-    'sonarjs/no-identical-functions': 'allow',
+    'sonarjs/no-duplicate-string': 1,
+    'sonarjs/no-identical-functions': 1,
     'func-names': 0,
     'global-require': 0,
     'no-shadow': 0,
-    'import/order': 'allow',
+    'import/order': 1,
     'max-classes-per-file': 0,
   },
 };

optin-builder/.env

@@ -0,0 +1,94 @@
+# description: Your Twilio phone number for sending and receiving messages.
+# format: phone_number
+# required: true
+TWILIO_PHONE_NUMBER=
+
+# description: Set your phone number as the username for making edits to your app.
+# format: secret
+# required: true
+ADMIN_PHONE_NUMBER=
+
+# description: Set a password for your app. You'll use this later to change your opt-in settings.
+# format: secret
+# required: true
+ADMIN_PASSWORD=
+
+# description: Public URL to the organization's logo.
+# configurable: false
+LOGO_URL="/placeholder-icon.png"
+
+# description: Title of the opt-in campaign.
+# configurable: false
+CAMPAIGN_TITLE=""
+
+# description: Brief description of the opt-in campaign.
+# configurable: false
+CAMPAIGN_DESCRIPTION=""
+
+# description: Statement of how often the subscriber will receive messages (e.g. 4 msgs / month.).
+# configurable: false
+MESSAGE_FREQUENCY=""
+
+# description: Text on the registration button.
+# configurable: false
+BUTTON_CTA="Join"
+
+# description: Keyword that users can text to opt-in to the campaign.
+# configurable: false
+OPT_IN_KEYWORD=
+
+# description: Confirmation message sent to user once they have subscribed.
+# configurable: false
+SUBSCRIBE_CONFIRMATION=
+
+# description: Contact information for Terms of Service.
+# configurable: false
+CONTACT_INFORMATION=""
+
+# description: Public URL to a custom CSS file that will be loaded when the form renders.
+# configurable: false
+CUSTOM_CSS=
+
+# description: Background color of the page.
+# configurable: false
+BACKGROUND_COLOR=
+
+# description: Font color of the page.
+# configurable: false
+FONT_COLOR=
+
+# description: Link to your organization's privacy policy.
+# configurable: false
+PRIVACY_POLICY_LINK=""
+
+# description: Indicates which type of data storage will be used (Segment, Airtable, or Webhook).
+# configurable: false
+DATA_SOURCE=
+
+# description: Segment write key.
+# configurable: false
+SEGMENT_WRITE_KEY=
+
+# description: Airtable API key.
+# configurable: false
+AIRTABLE_API_KEY=
+
+# description: Airtable Base ID.
+# configurable: false
+AIRTABLE_BASE_ID=
+
+# description: Airtable table name.
+# configurable: false
+AIRTABLE_TABLE_NAME=
+
+# description: Airtable phone number column name.
+# configurable: false
+AIRTABLE_PHONE_COLUMN_NAME=
+
+# description: Airtable opt-in column name.
+# configurable: false
+AIRTABLE_OPT_IN_COLUMN_NAME=
+
+# description: Webhook URL to send opt-in events to.
+# configurable: false
+WEBHOOK_URL=

optin-builder/.gitignore

@@ -0,0 +1,112 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*

optin-builder/.nvmrc

@@ -0,0 +1 @@
+10

optin-builder/.twilio-functions

@@ -0,0 +1,3 @@
+{
+	"projects": {}
+}

optin-builder/.twiliodeployinfo

@@ -0,0 +1,10 @@
+{
+	"AC139e28468482228e22b97bf74b16518e": {
+		"serviceSid": "ZS59e342d129924a76c27c60fd9ef35c7e",
+		"latestBuild": "ZBbe5f6c20c73f970079280f6a7e1d6a17"
+	},
+	"AC6c5eeabad12e491f36ab59fed35282ba": {
+		"serviceSid": "ZS5bd403bfd197f0f7d05c04cd5e0e93d8",
+		"latestBuild": "ZB45c88c27989d049f9519f6c9deeb41b7"
+	}
+}

optin-builder/README.md

@@ -0,0 +1,86 @@
+# Twilio Opt-In Builder
+
+Easily create an embedable SMS Opt-In form to collect contacts for your campaign.
+
+![Twilio Keyword Screenshot](https://user-images.githubusercontent.com/1418949/121948197-c944dd80-cd0b-11eb-8ce3-53a1405eb557.png)
+
+## Key Features
+
+* Live editor allows you to preview your signup form.
+* Customizable logo, content, and colors.
+* Generate compliance language and terms of service.
+* Track opt-ins via webhook, Segment, or Airtable.
+* Supports one-click keyword opt-in on Android and iOS.
+
+## Pre-requisites
+
+1. Install the [Twilio CLI](https://www.twilio.com/docs/twilio-cli/quickstart#install-twilio-cli)
+2. Install the [serverless toolkit](https://www.twilio.com/docs/labs/serverless-toolkit/getting-started):
+
+```shell
+twilio plugins:install @twilio-labs/plugin-serverless
+```
+## Setup
+
+3. Clone the repository and `cd` into it:
+```shell
+git clone [email protected]:cweems/twilio-keyword.git
+
+cd twilio-keyword
+```
+4. Install dependencies:
+```shell
+npm install
+```
+5. Create `.env` file and set environment variables:
+```shell
+cp .env.example .env
+```
+> Note: you'll need to set `ACCOUNT_SID`, `AUTH_TOKEN`, `TWILIO_PHONE_NUMBER`, `ADMIN_PHONE_NUMBER`, and `ADMIN_PASSWORD` before deploying. All other environment variables can be set by the opt-in builder. If you're using Quick Deploy, these initial environemnt variables will be set for you.
+
+6. Deploy to Twilio Serverless:
+```shell
+twilio serverless:deploy
+
+# View your opt-in builder at https://[my-runtime-url].twil.io/index.html
+```
+
+7. Optional: develop locally if you want to edit HTML / CSS / JavaScript:
+```shell
+twilio serverless:start --live
+```
+
+### Environment Variable Reference
+If you're running this project locally, you'll need to manually set environment variables in your `.env` file. When run on Twilio Serverless, environment variables are automatically set when you click the `Save Settings` button.
+
+To keep your tokens and secrets secure, make sure to not commit the `.env` file in git. When setting up the project with `twilio serverless:init ...` the Twilio CLI will create a `.gitignore` file that excludes `.env` from the version history.
+
+| Environment Variable        | Description                                                                                                                                                                                 | Required?   |
+|-----------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------|
+| ACCOUNT_SID                 | Your Twilio Account SID                                                                                                                                                                     | Required    |
+| AUTH_TOKEN                  | Your Twilio Account Auth Token                                                                                                                                                              | Required    |
+| TWILIO_PHONE_NUMBER         | The phone number that you will send SMS opt-ins from.                                                                                                                                       | Required    |
+| ADMIN_PHONE_NUMBER          | Your personal phone number, we use this as a username when you save settings, and also to send you and SMS when your configuration changes.                                                 | Required    |
+| ADMIN_PASSWORD              | Your password for updating settings via the live editor.                                                                                                                                    | Required    |
+| LOGO_URL                    | A publicly accessible link to your organization's logo.                                                                                                                                     | Recommended |
+| CAMPAIGN_TITLE              | The title of your opt-in page campaign. It should indicate what kinds of SMS your user is signing up for.                                                                                   | Required for compliance |
+| CAMPAIGN_DESCRIPTION        | A brief description of your opt-in campaign. What types of messages will the user receive?                                                                                                  | Required for compliance |
+| MESSAGE_FREQUENCY            | The number of messages and cadence that a user will receive messages.                                                                                                                                 | Required for compliance |
+| BUTTON_CTA                  | The text on the button to register for the campaign.                                                                                                                                        | Recommended |
+| OPT_IN_KEYWORD              | The keyword that the user must respond with for double opt-in.                                                                                                                              | Required for compliance    |
+| SUBSCRIBE_CONFIRMATION      | The message that the user will receive once they have confirmed using double opt-in.                                                                                                        | Required for compliance    |
+| CONTACT_INFORMATION         | Your organization's contact information for compliance purposes (included in the Terms of Service). This could be a support email or toll-free number.                                      | Required    |
+| CUSTOM_CSS                  | A link to a custom stylesheet.                                                                                                                                                              | Optional    |
+| BACKGROUND_COLOR            | The background color for your signup page.                                                                                                                                                  | Optional    |
+| FONT_COLOR                  | The font color for your signup page.                                                                                                                                                        | Optional    |
+| PRIVACY_POLICY_LINK         | A link to your organization's privacy policy.                                                                                                                                               | Recommended required for compliance |
+| DATA_SOURCE                 | The data storage destination for your opt-ins. Can be `webhook`, `airtable`, or `segment`.                                                                                                        | Optional    |
+| SEGMENT_WRITE_KEY           | The write key for your Segment Node.js source. Will be used to track opt-in events.                                                                                                         | Optional    |
+| AIRTABLE_API_KEY            | API key for your Airtable base if you are storing opt-ins in Airtable.                                                                                                                      | Optional    |
+| AIRTABLE_BASE_ID            | Base ID for the Airtable base where you'll be storing opt-ins.                                                                                                                              | Optional    |
+| AIRTABLE_TABLE_NAME         | Name of the table where you'll be storing your opt-ins.                                                                                                                                     | Optional    |
+| AIRTABLE_PHONE_COLUMN_NAME  | Name of the Airtable column where you'll store the phone numbers of your opt-ins. We'll check this column for existing opt-ins and remove the opt-in if the user responds with a stop word. | Optional    |
+| AIRTABLE_OPT_IN_COLUMN_NAME | Name of the column where you'll store opt-in status in Airtable. Values can be true / false.                                                                                                | Optional    |
+| WEBHOOK_URL                 | URL to a webhook on your own custom app that will receive Opt-In events.                                                                                                                    | Optional    |
+
+