Webview Node

webview node is an integration capability from engati 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 in the engati bot use cases use cases payment payment 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 oauth 2 0 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 custom 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 engati 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 setup examples setup examples in this section, we will cover examples for all three types stripe, google oauth, and custom we do not require any specific credentials for the jotform setup stripe stripe for stripe setup, we need publisher key and secret key from stripe other information can be retrieved from user interaction with the bot steps to setup stripe add the publisher key and secret key provided with your account from the stripe the payment method type is fixed the user can only make card payments enter the item name this can be taken as an attribute and also from a json call enter amount this specifies the unit price of the product selected enter item quantity this specifies the quantity of the product selected select the currency in which the amount is to be collected key notes conversion this helps to break down the selected currency into smaller denominations collect billing address this would record the billing address with stripe and is not sent back to the bot during the bot flow, the 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 if there is an error in the payment process, a bot builder can define the flow of the bot for more information on stripe currencies and minimum and maximum value, please refer https //stripe com/docs/currencies google google google requires an app setup from which we can use a client id and client secret a bot builder can set up a user to be authenticated against google using oauth 2 0 steps to set up 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 engati for google, you can configure it here add in authorised domains “engati com” console google com>apis>oauth consent screen add in authorised redirect url https //agents engati ai/web view redirect/bot scope scope is the service we want to use from google users 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 at 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, the 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 microsoft microsoft requires an app setup from which we can use a client id and client secret a bot builder can set up a user to be authenticated against microsoft using oauth 2 0 login to https //portal azure com/ create an application under apps add the persmission for user read add https //agents engati ai/web view redirect/bot into the redirect urls section open webview node and select microsoft copy and paste the client id and client secret value from overview section add scope as https //graph microsoft com/user read custom (jotform) 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 notes provider name you can fill in the name of the provider for which we want to access the given service 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 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 steps to set up select add form element add a short text entry element give question name “ en state” goto element settings> advanced go to field details and sets a unique name as “ en state go to the form settings tab and select thank you page sample links – ” https //app engati ai/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 when you want to receive data from your form to your bot in this case, we need a student name from the form to send the 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 old link https //dev engati ai/web view redirect/bot new link https //dev engati ai/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 the url on the website if you face any issues or queries please reach out to us at mailto\ support\@engati com