Nexmo Chat with Typeform

This project supports an article where you learn how to set up a basic Typeform form and capture data from a webhook in Node.js framework Express.js. You'll use Passport.js to authenticate a user, use Nexmo's Node.js Server SDK to register a user, and generate a JWT to use with Nexmo's JavaScript Client SDK.

The master branch is the starting point for this guide and as such expects you to run a basic client-side chat application by hardcoding credentials into JavaScript and running the application.

Switch to the tutorial-finish branch to find additional steps for using this application with Typeform and Nexmo's Node.js Server SDK.

Table of Contents

Getting Started
- Prerequisites
- Run the Application
Code of Conduct
Contributing
License

Getting Started

Prerequisites

Node & NPM

This application was developed using Node.js 13.1 and NPM 6.12. Check you have stable or long-term support versions of Node.js installed, at least.

node --version

npm --version

If you don't have Node.js or NPM, or you have older versions, head over to nodejs.org and install the correct version if you don't have it.

Nexmo Account

Nexmo CLI

To set up your application, you'll need to install the Nexmo CLI. Install it using NPM in terminal.

npm install -g nexmo-cli@beta

Now, configure the CLI using your API key and secret, found on your Nexmo account dashboard.

nexmo setup <your_api_key> <your_api_secret>

Run the Application

The application you're starting with is a chat application built using Bootstrap and the Nexmo JavaScript Client SDK. It's configurable through editing static files, but launched using Express.js, a lightweight Node.js based http server.

Basic Installation

Clone the demo application straight from GitHub.

git clone https://github.com/nexmo-community/nexmo-chat-typeform-magiclinks.git

Once cloned, change into the new demo application directory.

cd nexmo-chat-typeform-magiclinks

Install the npm dependencies.

npm install

Start the application the standard way.

npm start

Start the application, but with nodemon instead.

npm run dev

Create Nexmo Application

nexmo app:create "Nexmo RTC Chat" --capabilities=rtc --rtc-event-url=http://example.com --keyfile=private.key
# Application created: 4556dbae-bf...f6e33350d8
# Credentials written to .nexmo-app
# Private Key saved to: private.key

Create Nexmo Conversation

nexmo conversation:create display_name="Typeform Chatroom"
# Conversation created: CON-a57b0...11e57f56d

Create Your User

nexmo user:create name=<USER_NAME> display_name=<DISPLAY_NAME>
# User created: USR-6eaa4...e36b8a47f

Add User To Conversation

nexmo member:add <CONVERSATION_ID> action=join channel='{"type":"app"}' user_id=<USER_ID>
# Member added: MEM-df772...1ad7fa06

Generate User Token

nexmo jwt:generate ./private.key sub=<USER_NAME> exp=$(($(date +%s)+86400)) acl='{"paths":{"/*/users/**":{},"/*/conversations/**":{},"/*/sessions/**":{},"/*/devices/**":{},"/*/image/**":{},"/*/media/**":{},"/*/applications/**":{},"/*/push/**":{},"/*/knocking/**":{}}}' application_id=<APPLICATION_ID>
# eyJhbGciOi...XVCJ9.eyJpYXQiOjE1NzM5M...In0.qn7J6...efWBpemaCDC7HtqA

Configure The Application

Edit the views/layout.hbs file and find the JavaScript shown here.

    <script>
      var userName = '';
      var displayName = '';
      var conversationId = '';
      var clientToken = '';
    </script>

Edit the config with the values you've generated in the commands above.

    <script>
      var userName = 'luke.oliff@vonage.com';
      var displayName = 'Luke Oliff';
      var conversationId = 'CON-123...y6346';
      var clientToken = 'eyJhbG9.eyJzdWIiO.Sfl5c';
    </script>

Now, you can start the application again and start chatting... with yourself... because no one else can log in.

npm start

Code of Conduct

In the interest of fostering an open and welcoming environment, we strive to make participation in our project and our community a harassment-free experience for everyone. Please check out our Code of Conduct in full.

Contributing

We ❤️ contributions from everyone! Check out the Contributing Guidelines for more information.

License

This project is subject to the MIT License

lukeocodes/nexmo-chat-typeform-magiclinks