Pages - Components (General Tab)
Evoke Components are segments that contain a special Evoke Component such as a Chatbot or Chatwindow. These are described in more detail below.

  • OnlinePayment - Inclusion of online payments using a range of providers including PayPal and Stripe.

  • Map Display - Inclusion of Google Maps Web Service (requires Google Maps API)

  • Calculator - Inclusion of a slide in calculator on the screen.

  • ChatBot Window - A conversational chat window (human-to-chatbot)

  • Agent Chat Window - A conversational chat window (human-to-human).

  • Charts and Graphs - Creating and Configuring Charts and Graphs.



Online Payments - Include online payments in your app using a range of providers
Evoke apps can interface with a range of online payment providers to allow you to take payments for goods, invoices, etc within your app. Interfaces to banks usually require specific regional API code, however, online payment providers such as PayPal and Stripe are global and can be included in your app using Evoke "Components".
To use one of the online payment providers supported by Evoke you will need to have an acquirer account with the provider, for example, with PayPal this means you must have a PayPal account (just like when you use something like eBAY). In the Content Type section (General tab in Pages) select Component. This will open up a component definition option.

Select Online Payment, from the drop down options, and a new configuration Segment will be displayed, as is shown below.

PayPal
You can now configure your PayPal Online Payment options using the following settings:

  • Component Type - This is the component Type of OnlinePayment that you selected above

  • Payment Service - This selects the online payment type, in this case PayPal.

  • Default Currency - Most online payment providers require you to define your default currency, this is usually the currency of where most of your transactions will take place or your "home" or PayPal account currency.

  • Default Payment Intent - Choose if, as the default option, you would like transactions either Authorised simply authorise the payment transaction for an order after order creation but do not complete the transaction (e.g. a pre-auth) or Capture complete and capture the transaction immediately.

    • When using PayPal online payments PayPal will give you a unique "live client id" and "live secret key". However, as part of their testing process they will also give you a "sandbox client id" and "sandbox secret key", if you use these the transactions will not move real money and all transactions will be considered a test transactions.

  • Sandbox client ID - your PayPal client id (number) to be used when testing your online payments.

  • Sandbox Secret Key - your PayPal Secret Key (provided to you by PayPal) to be used when testing your online payments.

  • Live client ID - your PayPal client id (number) to be used when you would like your online payments to be live and to move real money from real PayPal accounts.

  • Live Secret Key - your PayPal Secret Key (provided to you by PayPal) to be used when you would like your online payments to be live and to move real money from real PayPal accounts.

  • Default Landing Page - This defines which page on the PayPal site your user will be directed to in order to complete their payment. The options are either Login which will cause the user to be redirected to a PayPal login page so that they can login and complete the transaction or Billing which will cause the user to be redirected to a Billing page to enter a credit or debit card and other billing information.

  • Default Business Name - If you are a company then this is the company name that will appear on the PayPal transaction.

  • Default Shipping preference - Where to get the shipping/mailing details from. The options are:

    • Get From File - Use the customer provided shipping address on the PayPal site.

    • No Shipping - Redact the shipping address from the PayPal site. Reccomened for digital goods.

    • Set Provided Address - Use the merchant provided address. The customer cannot change this address on the PayPal site.

  • Button Layout Style - The options for the layout style of the PayPal buttons on your app screen are horizontal - the buttons are stacked horizontally with a maximum of two buttons or vertical - the buttons are stacked vertically with a maximum of four buttons

  • Button Shape - The options for the shapre of the PayPal buttons on your app screen are pill - the button will have rounded corners just like the shape of a pill or Rect - the button will have right angled corners and will appear like a rectangle.

  • Button Color - The options for the color of the PayPal buttons on your app screen are blue - the buttons will be a blue color, gold - the buttons will be a gold color or silver - the buttons will be a silver color

  • Button label - The options for the label that will appear on the PayPal button that will appear on your app screen are checkout - this will display the PayPal checkout button, installment - this will display the PayPal installment button and offers payment options in an installment period, pay - this will display pay within the button and initializes the checkout flow or paypal - this is the recommended option. It is what most existing PayPal users are used to seeing. It is the default option and displays the standard PayPal logo.

  • Disable cards - Cards to disable from showing in the PayPal smart payment button.


To activate PayPal support you will need to add your PayPal specific settings for your shopping cart, product being purchased, etc in JavaScript. This is because every shopping cart/payment requirement is different/unique, however, these settings are fairly simple and a detailed explanation of what is needed may be found on the PayPal Custom Code page.


Stripe
You can now configure your Stripe Online Payment options using the following settings:

  • Component Type - This is the component Type of OnlinePayment that you selected above

  • Payment Service - This selects the online payment type, in this case Stripe.

  • Default Currency - Most online payment providers require you to define your default currency, this is usually the currency of where most of your transactions will take place or your "home" or Stripe account currency.

  • Default Payment Intent - Choose if, as the default option, you would like transactions either Authorised simply authorise the payment transaction for an order after order creation but do not complete the transaction (e.g. a pre-auth) or Capture complete and capture the transaction immediately.

    • When using Stripe online payments Stripe will give you a unique "live publishable key" and "live secret key". However, as part of their testing process they will also give you a "sandbox publishable key" and "sandbox secret key", if you use these the transactions will not move real money and all transactions will be considered a test transactions.

  • Sandbox publishable key - your Stripe publishable Key (provided to you by Stripe) to be used when testing your online payments.

  • Sandbox Secret Key - your Stripe Secret Key (provided to you by Stripe) to be used when testing your online payments.

  • Live publishable key - your Stripe publishable Key (provided to you by Stripe) to be used when you would like your online payments to be live and to move real money from real Stripe accounts.

  • Live Secret Key - your Stripe Secret Key (provided to you by Stripe) to be used when you would like your online payments to be live and to move real money from real Stripe accounts.

  • Use integrated pay button - checkbox that indicates if you would like to use an Evoke button to initiate the Stripe API call.

  • Pay Button text - What text would you like on your payment button - something like "Pay with Stripe Now" etc.

  • Pay Button back color - pick from the app color pallette the background color of the Strip Pay button.




Map Display - Inclusion of Google Maps Web Service
In the Content Type section (General tab in Pages) select Component. This will open up a component definition option.

Select Map Display, from the drop down options, and a new configuration Segment will be displayed, as is shown below.

Please note that many of the map services, including Google Maps, require the generation and inclusion of an API Key for them to be accessed via a third party app. For Google Maps this can be achieved by signing into the Google Cloud Platform and generating an API Key.



You can now configure your Map service using the following settings:

  • Component Type - This is the component Type of Map Display that you selected above

  • Mapping Service Type - At present only Google Maps is included as a standard Evoke map service.

  • Mapping API key - your personal map service api key. For Google maps this is created via the Google Cloud Platform

  • Latitude Value/Binding - The Latitude that you would like your map to be centered on e.g. "40.617631" or a populated datasource property containing the value e.g. "MapCoordinates.Latitude".

  • Longitude Value/Binding - The Longitude that you would like your map to be centered on e.g. "-73.963546" or a populated datasource property containing the value e.g. "MapCoordinates.Longitude".

  • Pin at initial position - inclusion, on the map, of a pin at the first selected position

  • Initial zoom level (0-19) - set the initial zoom level of the map being displayed. Set from 0 (whole world) to 19 (finest detail i.e. a house) or anything inbetween










ChatBot Window - A conversational chat window (human-to-chatbot)
In the Content Type section (General tab in Pages) select Component. This will open up a component definition option, please see the image on the left.


Select Chatbot Window, from the drop down options, and a new configuration Segment will be displayed, as is shown below.


You can now configure your Chatbot using the following settings:

  • Component Type - This is the component Type of Chatbot Window that you selected above

  • Chatbot Framework - At present there are two options for the Chatbot Framework that you can select to use for the AI questions and answers that the Evoke Chatbot component will use, these are:

    • Custom - A proprietary Evoke framework implemented in Javascript

    • IBM Watson - The IBM Watson chatbot framework

  • Chat Start Button Color - the color of the Chat Start button that the user will click to start the Chatbot conversation

  • Chat Start Button Text - the text included in the Chat Start button that the user will click to start the Chatbot conversation

  • Chat End Button Color - the color of the Chat End button that the user will click to End the Chatbot conversation

  • Chat End Button Text - the text included in the Chat End button that the user will click to End the Chatbot conversation

  • Chat Service URL - If your Chatbot Framework is Custom then this option is not required and will be hidden. If you have selected another Chatbot Framework e.g. IBM Watson then this is the URL of the external service (e.g. IBM Watson) that exposes the chatbot intelligence

  • DataSource Path - Chat messages are automatically saved in an Evoke DataSource so that the they can be displayed in the chat window. This requires you to create a temporary DataSource in the PageSeries the chatbot is being used that has an Entity structure of at least 3 alphanumeric fields (text, date, time - see below). This DataSource is not automatically saved and if you do not need to save the ChatBot conversation then the Evoke Classification Entity definition may be used (as can be seen in the Example App). If you wish to save ChatBot conversation messages then a new ChatBot Message Entity should be mapped (DataMappings) to a file/object/table with the appropriate property structure (3 alphanumeric fields) and a save button or similar added that saves the DataSource back to the Repository.

  • Chat Text Property - The property in the Entity used for the Chatbot messages (in this example it is a property from the Evoke Classification Entity) that will hold the text of the conversation chat (Alphanumeric) message (for each message)

  • Chat Date Property - The property in the Entity used for the Chatbot messages (in this example it is a property from the Evoke Classification Entity) that will hold the date of the conversation chat (Alphanumeric) message (for each message)

  • Chat Time Property - The property in the Entity used for the Chatbot messages (in this example it is a property from the Evoke Classification Entity) that will hold the time of the conversation chat (Alphanumeric) message (for each message)



Agent Chat Window - A conversational chat window (human-to-human)
In the Content Type section (General tab in Pages) select Component. This will open up a component definition option, please see image on the left.


Select Agent Chat Window, from the drop down options, and a new configuration Segment will be displayed, as is shown below.

You can now configure your Agent Chat Window using the following settings:

  • Component Type - This is the component Type of Agent Chat Window that you selected above

  • Chatbot Framework - At present there are two options for the Chatbot Framework that you can select to use for the AI questions and answers that the Evoke Chatbot component will use, these are:

    • Custom - A proprietary Chat framework that you have or will create

    • Evoke Chat Agent - The Evoke Agent chat app (please contact BlueFinity, additional costs may apply)

  • Chat Start Button Color - the color of the Chat Start button that the user will click to start the Agent Chat conversation

  • Chat Start Button Text - the text included in the Chat Start button that the user will click to start the Agent Chat conversation

  • Chat End Button Color - the color of the Chat End button that the user will click to End the Agent Chat conversation

  • Chat End Button Text - the text included in the Chat End button that the user will click to End the Agent Chat conversation

  • Chat Service URL - If your Agent Chat Framework is Custom then this is the URL of the external custom service, that you created, that exposes the Agent Chat intelligence

  • DataSource Path - Chat messages are automatically saved in an Evoke DataSource so that the they can be displayed in the chat window. This requires you to create a temporary DataSource in the PageSeries the Agent Chat is being used that has an Entity structure of at least 3 alphanumeric fields (text, date, time - see below). This DataSource is not automatically saved and if you do not need to save the Agent Chat conversation then the Evoke Classification Entity definition may be used (as can be seen in the Example App). If you wish to save the Agent Chat conversation messages then a new Agent Chat Message Entity should be mapped (DataMappings) to a file/object/table with the appropriate property structure (3 alphanumeric fields) and a save button or similar added that saves the DataSource back to the Repository.

  • Chat Text Property - The property in the Entity used for the Agent Chat messages (in this example it is a property from the Evoke Classification Entity) that will hold the text of the conversation chat (Alphanumeric) message (for each message)

  • Chat Date Property - The property in the Entity used for the Agent Chat messages (in this example it is a property from the Evoke Classification Entity) that will hold the date of the conversation chat (Alphanumeric) message (for each message)

  • Chat Time Property - The property in the Entity used for the Agent Chat messages (in this example it is a property from the Evoke Classification Entity) that will hold the time of the conversation chat (Alphanumeric) message (for each message)



Calculator - Inclusion of a slide in calculator on the screen
Evoke has its own calculator that can by displayed in a segment or slide onto a screen when needed. Usually the Calculator component is contained in an "unpinned" segment and displayed either on the click of a textbox button widget or a button/image click, via a click action. The set button on the calculator can be used to set the result of a calculation into a display/input field on the screen. In the Content Type section (General tab in Pages) select Component. This will open up a component definition option.

Select Calculator, from the drop down options, and a new configuration Segment will be displayed, as is shown below.

The Calculator Component in Evoke is often used with the Unpin Segment adaptation and the following Click Actions:

  • ToggleShowUnpinnedSegment

  • SetCalculatorTarget (sets the input/display field for the result, in the calculator, to update)


You can now configure your Calculator using the following settings:

  • Component Type - This is the component Type of Calculator that you selected above

  • Calculator Action on Set - What to do when the "set" button is clicked on the calculator. Options are a) Do Nothing. b) Hide, slide out of view, the unpinned segment containing the calculator c) Hide the segment containing the calculator d) Navigate to the parent page.

  • Segment Widget ID - The Segment ID that displays the calculator - this may be a parent segment as in the example shown.














© 2022 BlueFinity International. All rights reserved.
A member of the Mpower1 Group
Privacy and Cookie Policy