Webview Javascript SDK Reference

Introduction

BotStar's Webview Javascript SDK provides a communication method between webpage and BotStar chatbot. Your webpage can receive data from BotStar chatbot or send your webpage data to BotStar chatbot.

Installation

<script defer src="https://static.botstar.com/webview/sdk/webview-sdk-1.0.0.js"></script>

Simply copy and paste the snippet below before the </body> tag on every page where you want to communicate with BotStar chatbot.

If you want to use BotStarWebview as soon as possible you need to define a function called onChatBotReady then use BotStarWebview inside it.

Receive data from BotStar chatbot

<head>
  <meta name="bs:input:youtubeUrl" content="type=string,description=Youtube URL" />
  <meta name="bs:input:buttonName" content="type=string,description=Display name for the button" />
</head>
<body>
  <script>
    function onChatBotReady() {
      var youtubeUrl = BotStarWebview('getParameter', 'youtubeUrl');
      var btnName = BotStarWebview('getParameter', 'buttonName');
    }
  </script>
</body>

Your webpage will be opened in modal mode by BotStar chatbot. BotStar chatbot will pass data to your webpage and you can use function BotStarWebview('getParameter', dataName) to get data dataName.

You have to define HTML meta bs:input:dataName in order to use BotStarWebview('getParameter', dataName).

Send data to BotStar chatbot

<head>
  <meta name="bs:output:currentSeconds" content="type=number,description=The ..." />
  <meta name="bs:outlet:Button Clicked" />
</head>
<body>
  <script>
    function sendResponse() {
      var currentSeconds = player ? player.getCurrentTime() : 0;
      BotStarWebview('sendResponse', state, { currentSeconds }, 'Button Clicked')
        .catch((err) => {
          console.log(err);
        });
    }
  </script>
</body>

Your webpage can send data to BotStar chatbot using function BotStarWebview('sendResponse', response, outputs, outletName).

Function Arguments

Argument	Type	Description
`response`	string	Anything you want to response to BotStar chatbot
`outputs`	Object	Object property's value is string or number only. Each property in outputs object need a corresponding HTML meta `bs:output:...` first
`outletName`	string	You have to define HTML meta `bs:outlet:outletName` first

Starter Kit

You can quickly start with webview-starter-kit.

We have a video for Youtube Webview example, you can check it out to know how it works Youtube Webview example.

#Introduction

#Installation

#Receive data from BotStar chatbot

#Send data to BotStar chatbot