Webview Node

1. Introduction

Webview Node is an Integration capability from MyBOT for enabling advanced use cases like payments, OAUTH & more that involve a third party web interface for taking user inputs for authentication or simple data inputs. Further, configuration parameters for Stripe and Google OAUTH have been built in to make it even easier for you to use them within your conversation flows..

1.1 Availability 

Webview Node will be available in Business Plan.

Webview node is available in Add a node modal’s Integration section.

2. Use Cases 

2.1 Payment

Now a bot builder can set up a method to receive payments through the bot using the Webview node. The Webview node provides configuration for payment setup through stripe and at the same time gives freedom to the bot builder to use any payment gateway using a custom setup.

Let’s consider a simple example here – A Gym uses a chatbot to engage users interested in its membership. Now the chatbot can support letting the user select the subscription plan and pay for it. 

2.2 OAuth 2.0

This node will also help set up OAUTH authentication to be completed within the conversation flow. The node comes pre-configured for required params for Google and can be used for many more systems using OAUTH > Other settings. 

Let us consider a simple example here – where a user may want to design a conversation flow where the user has to authenticate with Google to allow the chatbot access to some files from Google Drive. Really helpful in cases, where you want to enable integrations with cloud systems that require OAuth 2.0 based authentication. 

2.3 Custom

Custom Setup helps integrate with any other similar services that require the user to enter data on their website and convey the success back to MyBOT using a Callback. This could include other payment gateways or even services like JotForm that allow you to build custom forms and use them on your website or via the chatbot in this case. 

3. Setup Examples

In this section, we will cover examples for all three types Stripe, Google Oauth, and Custom. For stripe setup, we need Publisher Key and Secret Key from Stripe other information can be retrieved from user interaction with the bot. Google requires an app setup from which we can use a Client ID and Client Secret. We do not require any specific credentials for the Jotform setup.

3.1 Stripe

Configuration to add payment functionalities to a bot using Webview node.

3.1.1 Steps to setup stripe 

         Steps to setup stripe using Webview node for payment collection mechanism

         Add the Publisher key and secret key provided with your account from the stripe.

  1. *Payment method type is fixed. The user can only make card payments.             
  2. Enter the Item Name: This can be taken as an attribute and also from a JSON call
  3. Enter Amount: This specifies the unit price of the product selected 
  4. Enter Item Quantity: This specifies the quantity of the product selected
  5. Select the currency in which the amount is to be collected 

3.1.2 Key Notes

  1. Conversion: This helps to break down the selected currency in smaller denominations
  2. Collect Billing Address: This would record billing address with stripe and is not sent back to the bot.
  3. During the bot flow, Webview node will direct the end-user to a pop-up window which will process payments for stripe. Once the payment is successful, a user is redirected back to the bot. 
  1. If there is an error in the payment process, a bot builder can define the flow of the bot.
  2. For more information on stripe currencies and  minimum and maximum value, please refer https://stripe.com/docs/currencies 

3.2 Google

A bot builder can set up a user to be authenticated against Google using OAuth 2.0. 

3.2.1 Steps to setup Google using Webview node

  • Callback URL: This is configured on the service, Google in this case, that we want the user to be authenticated against. Once authentication is completed, Google will use the configured Callback URL to send the authentication details & status back to MyBOT. For Google, you can configure it here 
  • Add in Authorised Domains “mybot.cbots.com”

            Console.google.com>APIs>OAuth Consent Screen

  • Add in Authorised redirect URL

         Console.google.com>APIs>Credentials>app 

  • Scope: Scope is the service we want to use from google. User can add multiple scopes separated by space. For Example: To access google sheets one needs to add scope to access drive, read and write on sheets.  You can refer to google scopes for OAUTH 2.0 on https://developers.google.com/identity/protocols/googlescopes

          Once you complete setting up a project on your google console account you get a Client ID and Client Secret.

  • During the bot flow, Webview node will direct the customer to a pop-up window which will allow the user to access the requested scope. Once the request is completed a user is redirected to the bot. 
  • If there is an error in the payment process, a bot builder can define the flow of the bot.

3.3 Custom  (Jotform)

Including an example here of a third-party service, JotForm that allows you to use custom forms on your website. We will show how to use one of these forms, to be set up to be invoked during the conversation flow of an end-user.

3.3.1 Notes

  1. Provider name: You can fill in the name of the provider for which we want to access the given service.
  2. Callback URL: This will be updated on the Jotform account
    In the callback URL, we can receive data from the website with the help of parameters.
  3. Mandatory: As a default key the user has to send en_state to the Jotform website and set it there. This contains important information like account id, bot id, etc.

3.3.2 Steps to set up 

  • Select Add form element 
  • Add a short text entry element
  • Give question name “ en_state
  • Goto element settings> Advanced.
  • Goto field details and sets a unique name as “ en_state.
  • Go to form settings tab and select thank you page.

Sample links – ” https://mybot.cbots.live/web-view-redirect/bot?en_state={en_state}&student_name={studentname} ”

  • Select Redirect to an external link, here add the call back URL provided in the Webview node.
  • Go to publish copy direct link to your form and add to request URL  column in Webview node, as shown in the image above.

3.3.3 When you want to receive data from your form to your bot 

  1. Check the name of the attribute in the form that you need

In this case, we need a student name from the form to send value we need to check the unique name of this column.

Element settings>advanced>field details>Unique name

  • Set the attribute name and parameter name in the Response tab of the node

Here, Attribute(used in bot) = name , Parameter(sent in callback URL) = Student_name 

  • Update call back URL on Jotform

Settings>Thank you page> Redirect link 

 Newlink: domain/web-view-redirect/bot?en_state={en_state}&student_name={studentname}

  • Student name filled in the form is returned to the bot and saved in the attribute “name”

Please note:  en_state is a parameter defined in the node and has to be added to redirect URL on the website.

Was this article helpful?

Related Articles

Leave A Comment?