If you look over at the top of the first sidebar of this blog, you’ll now see a “Call Us!” heading, some text and then a “Call” button. If you press that button, very soon you’ll be connected to our Voxeo Sales Team down in our Orlando office … simply using the microphone and speakers on your computer!
This is the magic of Phono!
As I showed in the previous post and video, using Phono with an application running in Voxeo’s Prophecy Hosting environment is as simple as finding the “application id” on the “Contact Methods” tab of your app… and then inserting the appropriate JavaScript into a web page to create a Phono object.
Now.. what if you want to have a button on your website that simply connects the caller to a phone number?
Connecting to a Phone Number – The Simple Way
The previous example showed how to connect it to an application of some type… but what about a phone number? You can simply use the Phono sample apps on phono.com. In fact, if you take the JavaScript code from the last post and just change this:
this.phone.dial("app:9991476142");
by replacing “app:….” with a phone number:
this.phone.dial("4074181800");
that simple button will call out to that phone number using the default Phono configuration.
This works great – but calls via the sample app are limited to a max of 10 minutes and there is also an introductory and final audio message. What if you want to make it so someone can connect and talk for any amount of time?
To do that, you need to create an application on one of our platforms (Prophecy Hosting (Evolution) or Tropo) that will transfer a call to the target phone number.
Connecting to a Phone Number – The CCXML Way
For this app to transfer a call, I chose to use the W3C industry standard Call Control XML (CCXML) running in Prophecy Hosting. The app does three things:
- Accepts an incoming call (which will be coming in from Phono)
- Makes an outbound call to a phone number (in this case Voxeo Sales)
- Joins the two calls together in a conference.
Now, for this to work for you, you need to:
- Have an account on our Evolution developer portal. If you don’t already have one, you can create an account for free.
- Have “outbound dialing privileges” enabled for your account. Because of potential malicious use, we don’t enable outbound dialing by default – but we freely give it out if you contact our support team, either by raising a support ticket inside your Evolution account or by simply emailing support@voxeo.com.
Once both of those are true, you can get started. Inside your Evolution account, you’ll first need to go into the “Files, Logs & Reports” area and create a new file under “www” that contains this CCXML – (replacing the phone number with YOUR target phone number):
NOTE: if you move your mouse to the upper right corner of this code listing there is an icon to copy the code to your clipboard. Also note that this code is blatantly copied from the “join” documentation page
<?xml version="1.0" encoding="UTF-8"?>
<ccxml xmlns="http://www.w3.org/2002/09/ccxml" version="1.0">
<var name="inboundID"/>
<var name="outboundID"/>
<var name="initState" expr="'state1'" />
<eventprocessor statevariable="initState">
<transition state="state1" event="connection.alerting">
<log expr="'*** INBOUND CONNECTION ALERTING ***'"/>
<assign name="inboundID" expr="event$.connectionid" />
<accept connectionid="inboundID" />
<assign name="initState" expr="'state2'"/>
</transition>
<transition state="state2" event="connection.connected">
<assign name="initState" expr="'state3'"/>
<log expr="'*** CONNECTION.CONNECTED: INBOUND ***'"/>
<!-- 4079651112 is Voxeo Sales line -->
<createcall dest="'tel:4079651112'" callerid="'1112223333'" connectionid="outboundID" timeout="'30s'"/>
</transition>
<transition state="state3" event="connection.progressing">
<log expr="'*** CONNECTION.PROGRESSING ***'"/>
<assign name="initState" expr="'state4'"/>
</transition>
<transition state="state4" event="connection.connected">
<assign name="initState" expr="'state5'"/>
<log expr="'*** CONNECTION.CONNECTED: INBOUND ***'"/>
<join id1="inboundID" id2="outboundID" duplex="'full'"/>
</transition>
<transition state="state5" event="conference.joined">
<log expr="'*** CONFERENCE JOINED: INBOUND LEG TO OUTBOUND LEG ***'"/>
</transition>
<transition event="connection.disconnected">
<log expr="'*** CONNECTION.DISCONNECTED ***'"/>
<exit/>
</transition>
</eventprocessor>
</ccxml>
After you’ve saved that file, you’ll go over into your Application Manager, create a new “Prophecy 9 – CCXML” application and map that application to your newly created file.
You can then look on the “Contact Methods” tab to find the application ID (“app:numbers“) that you can use with Phono. You can also add a phone number and call the application directly (or use Skype or SIP) to test that the application rings through to your target phone number.
Embedding Phono On A Web Page
Once you have the application running and it calls through correctly, you just need to create a Phono object on your web page. You could use that really basic example I gave in the last post – or much better – check out the examples on Phono.com.
Or… you could use one of the tools that are already emerging to integrate Phono with websites. In my particular case I’m using a very cool WordPress plugin that I’ll be writing about very soon!
However you embed the Phono code, you just need to supply the application ID of your CCXML app and you can start connecting your visitors to your phone number right away!
RSS Feed
