Custom Web Widgets

What is a custom web widget?

Custom Web Widgets let you include web pages inside the Nivo mobile app (or your whitelabelled app) chat timeline that work like other Nivo message types. 

Web Widgets can be used to show product information, reuse existing web quote systems, link to open banking providers, and much more. For example, you use a service such as Account Score for your Open Banking needs. You can set up a custom web widget in Nivo to link to the Account Score service to appear as a step in the Nivo journey

This is a nice and easy way to send your customer something you want them to action/click (see below) 

There are different ways you can get started with web widgets:

Type	When to use this
Sending a web widget with a standard URL	When you don't have bits of information you want to send over to a website OR you just want to send them down a simple journey
Sending a web widget with a URL with query parameters	When you've collected bits of information from the customer already on Nivo and you don't want them to re-key it into another website

Using query parameters 

• Query parameters are a defined set of parameters attached to the end of a url. They are extensions of the URL that are used to help define specific content or actions based on the data being passed. To append query params to the end of a URL, a ‘?’ Is added followed immediately by a query parameter.
• To add multiple parameters, an ‘&’ is added in between each. These can be created by any variation of object types or lengths such as String, Arrays and Numbers. The following is an example:
• Nivo template merge fields can be used as query parameters in the URL. For a list of template merge fields, please click here.

Example URL with query parameters (note - this is not a real URL):

https://connect.consents.online/nivo-dev/?externalReference={{customerNumber}}-3&telephone={{phoneNumber}}&firstname={{firstName}}&lastName={{lastName}}&email=dmb%40nivohub.com&completeUrl=[[redirect]]

• What does the above URL mean? This means that when the customer clicks the web widget button, the information we're going to pass onto our website so that the customer doesn't need to rekey (since we've already gathered the info from them) includes: Customer Number, Phone Number, First Name, and Last Name. 
• The [[redirect]] brings them back into the Nivo journey once they've completed the web journey. There will need to be a completion trigger at the end of the web journey for this to work. 

How do I set up a web widget?

1. Go to the settings cog in the top right of your Nivo console > Custom Web Widgets (Beta) 
2. Hit 'Create Custom Web Widget'
3. Fill out the: name, label text, button text, title text, and URL fields (see below) 

Example use cases: 

• Payments
• Appointment booking
• Sending the customer to an external website to take them through a journey there instead 
• Open banking (non-Truelayer) 

FAQ

Q: Do you handle the URL encoding

A: Yes 

Q: Can I use query parameters to pass data from Nivo into every website? 

A: Not every website supports query parameters. Please reach out to your provider to confirm that they can accept query parameters. 

Q: How can I authenticate the user for sensitive journeys like payments, etc.? 

A: We can put a cookie on the page to verify the authentication. However this is a more bespoke implementation. Please reach out to the Nivo team for more information. 

Q: Who can set up custom web widgets in my Nivo instance? 

A: Only an administrator user can set up a custom web widget.