Making An Applet

Hello Monkey, v1.0

We’re now ready to get started with making the Hello Monkey applet.

First, let’s fill out the applet.json file. This file is used to identify what the name of the applet is, as well as provide a brief description. We’ll also set they type of the applet to “voice”, which indicates this applet is used in a voice call flow. If you would like to build an SMS applet you can change the type to “sms”. If you want your applet to work with both you can define type as an array, like this: "type" : ["voice", "sms"]

Edit OpenVBX/plugins/hello-monkey/applets/monkey/applet.json to look like:

{
    "name" : "Hello Monkey",
    "description" : "Example Applet",
    "type" : "voice"
}

The UI of your applet is defined by the html and php in the ui.php file. This applet will say “Hello Monkey” to the caller using the text to speech engine, so we need to describe this to the person who uses this applet in a call flow. We also want to add a DropZone so that the user can add another applet to execute, after this applet completes.

Edit OpenVBX/plugins/hello-monkey/applets/monkey/ui.php to look like:

<div class="vbx-applet">
	<h2>This applet says "Hello Monkey" at this point during the call.</h2>
	<?php echo AppletUI::DropZone('primary'); ?>
</div>

Finally, lets fill out the twiml.php file. This describes the TwiML that executes on a call when it reaches this applet.

Edit OpenVBX/plugins/hello-monkey/applets/monkey/twiml.php to look like:

<?php

// The response object constructs the TwiML for our applet
$response = new TwimlResponse;

// The addSay converts writes the twiml to convert text to speech
$response->say('Hello Monkey!');

// $primary is getting the url created by what ever applet was put 
// into the primary dropzone
$primary = AppletInstance::getDropZoneUrl('primary');

// As long as the primary dropzone is not empty add the redirect 
// twiml to $response
if(!empty($primary)) {
	$response->redirect($primary);
}

// This will create the twiml for hellomonkey
$response->respond();

Now when you go to the Call Flow editor, you should see this applet in the sidebar. If you add this applet to a call flow, the caller will be greeted with “Hello Monkey” and will then be directed to the next applet.

Getting Started Hello Monkey v1.1