Chat API AngularJS SDK for WhatsApp API

Download SDK

You can customize this SDK to your needs and make it more convenient by clicking here:

WhatsApp AngularJS SDK Generator

The SDK allows you to receive and send messages through your WhatsApp account. Sign up now


Preparatory work

At the very beginning, we need to connect whatsapp with our script, so as we write the code, we check its operation. To do this, go to your personal account and get a QR code there. Next, open WhatsApp on your smartphone, go to Settings -> WhatsApp Web -> Scan a QR code.

Now we need to indicate a WebHook URL so the server can run the scrip when new messages arrive. Indicate a direct link to your script. You can’t indicate server IP only, but you can indicate the port.


The first steps for beginners

The generated SDK requires AngularJS framework to work. If you do not already have angular downloaded, please go ahead and do it from here. You will also need to download and link angular-moment and moment.js with your project because the SDK internally uses moment.js.

How to Use

The following section describes how to use the generated SDK in an existing/new project.

1. Configure Angular and Generated SDK

Perform the following steps to configure angular and the SDK:

  • Make a scripts folder inside the root folder of the project. If you already have a scripts folder, skip to the next step.
  • Move the angular.min.js file inside the scripts folder.
  • Move the WhatsappAPILib folder inside the scripts folder.
  • If any of the Custom Types in your API have Date/Datetime type fields or any endpoint has Date/Datetime response, you will need to download angular-moment and moment.js. Move these 2 files into the scripts folder as well.

folder-structure-image

2. Open Project Folder

Open an IDE/Text Editor for JavaScript like Sublime Text. The basic workflow presented here is also applicable if you prefer using a different editor or IDE.
Click on File and select Open Folder

Select the folder of your SDK and click on Select Folder to open it up in Sublime Text. The folder will become visible in the bar on the left.

open-folder-image

3. Create an Angular Application

Since Angular JS is used for client-side web development, in order to use the generated library, you will have to develop an application first. If you already have an angular application, skip to Step 6. Otherwise, follow these steps to create one:

  • In the IDE, click on File and choose New File to create a new file.
  • Add the following starting code in the file:
var app = angular.module('myApp', []);
app.controller('testController', function($scope)
{

});
  • Save it with the name app.js in the scripts folder.

4. Create HTML File

Skip to the next step if you are working with an existing project and already have an html file. Otherwise follow the steps to create one:

  • Inside the IDE, right click on the project folder name and select the New File option to create a new test file.
  • Save it with an appropriate name such as index.html in the root of your project folder. index.html should look like this:
<!DOCTYPE html>
<html>
<head>
    <title>Angular Project</title>
    <script></script>
</head>

<body>
</body>

</html>

initial-html-code-image

5. Including links to Angular in HTML file

Your HTML file needs to have a link to angular.min.js file to use Angular-JS. Add the link using script tags inside the head section of index.html like:

<script src="scripts/angular.min.js" ></script>

If any of the Custom Types that you have defined have Date/Datetime type fields or any endpoint has Date/Datetime response, you will also need to link to angular-moment and moment.js like:

<script src="scripts/angular.min.js" ></script>
<script src="scripts/moment.min.js" ></script>
<script src="scripts/angular-moment.min.js" ></script>

6. Include SDK references in HTML file

Import the reference to the generated SDK files inside your html file like:

<head>
    ...
    <!-- Helper files -->
    <script src="scripts/WhatsappAPILib/Module.js"></script>
    <script src="scripts/WhatsappAPILib/Configuration.js"></script>
    ...
</head>

The Module.js file should be imported before the other files. After Module.js, Configuration.js should be imported. The ModelFactory.js file is needed by ObjectMapper.js file. The ObjectMapper in turn, is needed by BaseController.js.

7. Including link to app.js in HTML file

Link your app.js file to your index.html file like:

<head>
    ...
    <script src="scripts/app.js"></script>
</head>

The link to app.js needs to be included at the very end of the head tag, after the SDK references have been added

8. Initializing the Angular App

You need to initialize your app and the controller associated with your view inside your index.html file. Do so like:

  • Add ng-app directive to initialize your app inside the body tag.
<body ng-app="myApp">
  • Add ng-controller directive to initialize your controller and bind it with your view (index.html file).
...
<body ng-app="myApp">
    <div ng-controller="testController">
        ...
    </div>
    ...
</body>
...

9. Consuming the SDK

In order to use the generated SDK's modules, controllers and factories, the project needs to be added as a dependency in your angular app's module. This will be done inside the app.js file. Add the dependency like this:

var app = angular.module('myApp', ['WhatsappAPILib']);

At this point, the SDK has been successfully included in your project. Further steps include using a service/factory from the generated SDK. To see working example of this, please head on over here and choose any class to see its functions and example usage.

10. Running The App

To run the app, simply open up the index.html file in a browser.

app-running

Other WhatsApp API SDKs

You can configure the SDK or generate other SDKs in 30+ programming languages: Chat API SDK generator.