Build an xApp with multiple channels

Prerequisites

• Access to a speech provider, for example, Microsoft Azure Speech Services, configured in Manage > AI & Voice Providers > Speech Providers.
• Twilio API Key.
• Twilio Extension preinstalled from Cognigy Marketplace.
• A Cognigy Voice Gateway endpoint configured in Cognigy.

Configure a basic xApp flow

1. Create a new flow in Cognigy and name it Multichannel App Tutorial.
2. In the flow editor, add an xApp: Init Session node to initialize the xApp session.
3. Below the xApp: Init Session node, add an xApp: Show Adaptive Card node to update the initialized xApp session with a new adaptive card-based xApp page.
4. In the AdaptiveCard Definition field, paste the following JSON:
    {
           "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
           "type": "AdaptiveCard",
           "version": "1.5",
           "body": [
               {
                   "type": "TextBlock",
                   "text": "Demo xApp form",
                   "weight": "Bolder",
                   "size": "Medium",
                   "wrap": true,
                   "style": "heading"
               },
               {
                   "type": "Input.Text",
                   "id": "myEmail",
                   "label": "Your email",
                   "regex": "^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+[.][A-Za-z0-9-]{2,4}$",
                   "isRequired": true,
                   "errorMessage": "Please enter a valid email address",
                   "style": "Email"
               }
           ],
           "actions": [
               {
                   "type": "Action.Submit",
                   "title": "Submit",
                   "style": "positive"
               }
           ]
       }
   
5. Click Save Node.
6. Below the xApp: Show Adaptive Card node, add a Question node. Use this node to prompt the user, via the primary channel, to provide data through the xApp. The node then waits for the xApp’s submit input before the flow continues.
7. In Question Type, select xApp so that the node accepts only data from the xApp as a valid answer.
8. Select the Text with Buttons output type to display a button with the xApp URL.
9. Configure the prompt message to instruct users to enter their email using the xApp. In the Text field, paste the following text:
   Welcome to the xApp tutorial. Please enter your email in the xApp using the link which I texted you via SMS
   
10. Copy the text from the Text field and paste it into the Textual Description field, because a voice channel doesn’t support the Text with Buttons output type.
11. Click Add Button. Fill in the following fields:
    • Button Title — enter Open xApp.
    • Select Button Type — select URL from the list.
    • URL — click and select the xApp Session URL token.
    • URL Target — select Open URL in a new tab.
12. If a user types anything in the chat, inform them that they need to use the xApp URL to enter their email. To do that, go to the Reprompt Options section and paste the following reprompt message:
    I can't continue before you enter the email in the xApp
    
13. Click Save.
14. Below the Question node, add a Say node.
15. In the Text field, paste the following text:
    I received the following email: {{input.data._cognigy._app.payload.myEmail}}
    Goodbye!
    
16. Click Save.

Configure voice channel support

1. Below the Say node, add a Hang Up Voice Gateway node at the end of the flow to end the conversation after email confirmation.
2. In the Reason for hang up field, specify Bot ended the call.
3. Click Save Node.

Implement SMS functionality

1. Below the xApp: Show Adaptive Card node, add an If node to check if the caller number is available in the input metadata. This step is optional but helps distinguish between different channels in testing scenarios.
2. In the If node, add the VG: Caller Number condition.
3. Click Save Node.
4. If the caller number is available, add a Send SMS node using a service like Twilio.
5. In the Send SMS node, fill in the following fields:
   • Twilio Connection — specify an API key that you previously got from your Twilio account.
   • Sender Number — set the sender number.
   • Receiver Number — specify the VG: Caller Number condition.
   • Message Body — customize the SMS message to include the xApp session URL.
6. Click Save Node.

Test the flow with a voice channel

1. Use the voice call feature in the Interaction Panel to test the flow. Make sure a speech provider is configured.
2. Call the specified Voice Gateway number from your phone.
3. Follow the conversation prompts and observe the flow’s behavior.

More information

• xApp Nodes
• xApps tutorials
• About xApps