Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Go to Haptik Website
  • Contact Us
  • Home
  • Developer Guides

How to Integrate Webviews on the Bot

Written by Medha Anand

Updated on April 19th, 2023

Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Getting Started
    Build Deploy Analyse Manage Account Bot Deactivation
  • Bot Building
    Essentials Smart Skills Steps User Messages Bot Responses Entities Connections Customisations User feedback collection Testing Whatsapp Bots NLU Bot Maintenance
  • Smart Agent Chat
    Set up Admin Settings MyChats Section (Agent Inbox) Live Traffic Section Teams Section Archives Section Analytics Plans on Smart Agent Chat
  • Conversation Design
    Design Basics Design Guides Designing for Platforms Designing WhatsApp Bots
  • Developer Guides
    Code Step Integration Static Step Integration Shopify Integration SETU Integration Exotel Integration CIBIL integration Freshdesk KMS Integration PayU Integration Zendesk Guide Integration Twilio Integration Razorpay Integration LeadSquared Integration USU(Unymira) Integration Helo(VivaConnect) Integration Salesforce KMS Integration Stripe Integration PayPal Integration CleverTap Integration Fynd Integration HubSpot Integration Magento Integration WooCommerce Integration Microsoft Dynamics 365 Integration
  • Deployment
    Web SDK WhatsApp Facebook Instagram Sunshine Conversation LINE Google Business Messages Telegram MS Teams Bot as an API iOS SDK Android SDK
  • External Agent Tool Setup
    Zendesk Chat Salesforce Service Cloud Freshchat Zoho NICE CXOne Gorgias
  • Analytics & Reporting
    Intelligent Analytics
  • Notifications
    SMS Notifications Success Measurement
  • Commerce Plus
    Catalog Integration Bot Building Guide Channel Deployments Unified ML Pipeline Documentation
  • Troubleshooting Guides
    Error Messages FAQs
  • Release Notes
+ More

Table of Contents

OverviewDisplaying the WebviewOpen a webpageClosing the WebviewDeploying Webview

Overview

Haptik platform allows you to open a standard review, where you can load a webpage right inside the chat window. This lets you offer new and better experiences that might not be possible using current HSLs. Using a webview is a quicker way to build custom UI elements compared to building a new HSL.

Webviews can be used to render custom content, take payments, or other experiences which may be difficult to offer with HSL messages.

Displaying the Webview

Open a webpage

You can open a web page using a Webview.

The webpage must be secured i.e. it should start with HTTPS.

Web SDK

You can display a webview by using buttons of type Open Screen. To set this follow these steps:

  1. Go to bot response and add any new chat element which contains buttons.
  2. Choose the button type as Open Screen.
  3. Choose a screen to open as Webview.
  4. Enter the link to open.
  5. Set the height of the webview. This should be a number between 0 and 1. Here 0 corresponds to 0%, 1 corresponds to 100%.

Android and iOS SDK

On the android and iOS SDK, the existing functionality can be extended by using native webview of each of the devices.

Apart from the HSL button configuration, the Webview can also be displayed by sending a Smart Action message with the SELF_SERVE_WEB URI

Smart Action Syntax

{
 "text": "Enter the message copy here.",
 "type": "BUTTON",
 "data": {
 "items": [
 {
 "actionable_text": "Button message here",
 "location_required": false,
 "uri": "SELF_SERVE_WEB",
 "is_default": 1,
 "type": "APP_ACTION",
 "payload": {
 "url": "<Provide your URL Here>", # This is the URL where the page is hosted
 "link": "",
 "gogo_message": ""
 },
 "emoji": ""
 }
 ]
 }
}

The Webview needs to be CORS enabled or the link might not work in the chat window.

Closing the Webview

Web SDK

On the Web SDK, the webview can be closed and data transferred back to the bot by using the following javascript code:

if (window.parent) window.parent.postMessage('<http://haptik-webview//perform-action?action=close&message=HelloWorld!!',> '*')|

The action parameter in the URL is used for closing the bot and the message parameter contains the message that needs to be sent when the webview is closed.

Android and iOS SDK

The webview can be closed by redirecting itself to a URL on the haptik-webview domain. The Native application will listen to the change on the URL and the webview will be closed and a message, if present will be sent to the user

http://haptik-webview//perform-action?action=close&message={message}&message_type={message_type}
Query Parameters Value Sample
action The action to be taken on the webview close
message The message is to be sent when the webview is closed "Thanks for providing the information"
message_type The type of message to be sent 0

Message Types

Message Type Code
Regular Message 0
Image 1
Form 17
Note 21
Location 26
TabList 31
Carousel 33
LaunchBot 47
No Type -1
Bot Reply Message 18
Task Tap Message 38

Deploying Webview

You can create your own webpage and host it. The webpage page must be secured i.e. start with HTTPS.

You need to pass the collected information (using entities or fetched from APIs) to the webpage which will be displayed as a webview to the user. Pass them using query parameters.

The following is a sample webpage that will be shown as a webview to the user.

<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Explore Now</title>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
 integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
 integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
 crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
 integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
 crossorigin="anonymous"></script>
</head>
<body>
 <div class="container-fluid">
 <div>
 <button onclick="closeWebview()" type="button" class="close" aria-label="Close">
 <span style="font-size: xx-large;" aria-hidden="true">&times;</span>
 </button>
 <div style="text-align: center;">
 <img class="model-img" id="modelUrl" src="" alt="model">
 </div>
 <div class="model-name">
 <strong id="model-name"></strong>
 </div>
 <div id="variant_colors">
 </div>
 <div class="scrolling-wrapper" id="specifications">
 </div>
 </div>
 </div>
 <div class="price-card">
 <div class="row">
 <div class="col">
 <strong id="on-road-price" class="model-price"></strong> <br>
 <span class="model-price-detail" style="opacity: 0.5; font-size: smaller;">Price</span>
 </div>
 <div class="col">
 <button type="button" onclick="bookNow()" class="btn btn-primary model-button">Book now</button>
 </div>
 </div>
 </div>
 <script>
<!-- retrive the data you need from URL -->
 const urlParams = new URLSearchParams(window.location.search);
 const variant_specs = JSON.parse(decodeURIComponent(urlParams.get('variant_specs')));
 const variant_colors = JSON.parse(decodeURIComponent(urlParams.get('variant_colors')));
 const model_name = decodeURIComponent(urlParams.get('model_name'));
 const image_url = decodeURIComponent(urlParams.get('image_url'));
 const on_road_price = decodeURIComponent(urlParams.get('on_road_price'));
 const book_now = decodeURIComponent(urlParams.get('book_now'));
 let variant_specs_div = document.getElementById("specifications");
 var modelImageElement = document.getElementById('modelUrl');
 modelImageElement.src = image_url;
 variant_specs.forEach(spec => {
 var outerDiv = document.createElement('div');
 var innerDiv = document.createElement('div');
 innerDiv.className = "card card-block card-1"
 var strongElement = document.createElement('strong');
 strongElement.className = "spec-key"
 strongElement.innerText = spec.label
 var spanElement = document.createElement('span');
 spanElement.className = "spec-value"
 spanElement.innerText = spec.value.substr(0,118)
 innerDiv.appendChild(strongElement);
 innerDiv.appendChild(spanElement);
 outerDiv.appendChild(innerDiv);
 variant_specs_div.appendChild(outerDiv);
 });
 var variant_colors_div = document.getElementById('variant_colors');
 variant_colors.forEach(color => {
 var span = document.createElement('div');
 span.className = "model-color";
 span.style.backgroundColor = color;
 variant_colors_div.appendChild(span);
 });
 var onRoadPriceElement = document.getElementById('on-road-price');
 onRoadPriceElement.innerText = parseInt(on_road_price).toLocaleString('en-IN', {
 maximumFractionDigits: 2,
 style: 'currency',
 currency: 'INR'
 });
 var modelNameElement = document.getElementById('model-name');
 modelNameElement.innerText = model_name
<!-- closing function -->
 function closeWebview() {
 window.parent.postMessage(`http://haptik-webview//perform-action?action=close`, '*');
 }
 function bookNow() {
 console.log("book now", book_now)
 window.open(book_now, '_blank');
 }
 </script>
</body>
</html>

Was this article helpful?

Yes
No
Give feedback about this article

Related Articles

  • Using External Packages in Code Step
  • What is Code Step? How to Use Code Step?
  • Providing Sample Input in Code Step
  • Using "final_response" in Main Method

Platform

  • Conversation Studio
  • Smart Skills
  • Advanced NLU
  • Intelligent Analytics
  • Omnichannel
  • Smart Agent Chat
  • Enterprise Security
  • Integrations

Solutions

  • Conversational Commerce
  • Lead Generation
  • Customer Care
  • WhatsApp
  • Conversational IVR
  • Google Business Messages

Industries

  • Retail/ E-Commerce
  • Financial Services
  • Travel & Hospitality
  • Telecom

Knowledge

  • ROI Calculator
  • Reports & Research
  • Case Studies
  • Webinars
  • ISAT
  • Tech Blog
  • Business Blog
  • Resources
  • Haptik v/s Yellow
  • Haptik v/s Liveperson
  • Haptik v/s IBM Watson
  • Haptik v/s Verloop
  • Conversations on AI

Company

  • Why Haptik
  • About Us
  • Careers
  • News & Media
  • Awards & Recognition
  • Contact Us
  • Partnerships
  • Investor Relations

Subscribe

Sign up to recieve the latest updates

Find us on

  • Twitter-footer
  • Linkedin-footer
  • YT-footer
  • Insta-footer
  • G2-footer
  • Facebook-footer

Knowledge Base Software powered by Helpjuice

Copyright © jio Haptik Technology Limited 2021 | Data Security & Privacy Policy | GDPR

North America | Asia Pacific | Africa | enterprise@haptik.ai

Definition by Author

0
0