How to expand Watson Assistant on Page Load - javascript

I would like to ask if it is possible to expand a Watson Assistant Chatbot on page load ? Currently, when the page loads, a user will then have to click on the little icon below to start the chatbot.
Watson Assistant Chatbot Icon
I am using Chrome, and the solution should also be working on mobile platforms.
I have the following empty page with the chatbot script so far :
<body style="height: 100%;">
<script src=https://assistant-web.watsonplatform.net/loadWatsonAssistantChat.js></script>
<script>
window.loadWatsonAssistantChat({
integrationID: "some id", // The ID of this integration.
region: "eu-gb" // The region your integration is hosted in.
}).then(function(instance){
instance.render();
});
</script>
</body>
</html>

Looking above I notice that you are using the new IBM Web Chat client, which is added to your html page. If you notice in the documentation for the web client - there is the section about extending the web chat and the extra documentation in GitHub.
In that documentation you will find a list of extra options that can be added to the creation of your instance of Web Chat. One of those options is to have the Web Chat open on loading the web page, rather than the icon. Or even adding the web chat to your own icon.
The option you are after is;
options.openChatByDefault - boolean - Optional - false - Whether to render the chat window initially in an open state. By default, the chat window is rendered in a closed state.
So your code should be;
<body style="height: 100%;">
<script src=https://assistant-web.watsonplatform.net/loadWatsonAssistantChat.js></script>
<script>
window.loadWatsonAssistantChat({
integrationID: "some id", // The ID of this integration.
region: "eu-gb", // The region your integration is hosted in.
options.openChatByDefault: true
}).then(function(instance){
instance.render();
});
</script>
</body>
</html>

Acording to the API you need openChatByDefault: true within window.watsonAssistantChatOptions = {...}.
Mind that my version of the API at the time of answering is different than that of the question, it goes with the following script for the embed.
window.watsonAssistantChatOptions = {
integrationID: "############", // The ID of this integration.
region: "eu-gb", // The region your integration is hosted in.
serviceInstanceID: "############", // The ID of your service instance.
onLoad: function(instance) { instance.render(); },
openChatByDefault: true
};
setTimeout(function(){
const t=document.createElement('script');
t.src="https://web-chat.global.assistant.watson.appdomain.cloud/versions/" + (window.watsonAssistantChatOptions.clientVersion || 'latest') + "/WatsonAssistantChatEntry.js"
document.head.appendChild(t);
});

Related

Google Earth Engine Client Javascript API authentication is not working

I have read the Google Earth Engine Client side Javascript API documentation. Here is the minimal code to start using Google Earth Engine Google Earth Engine Try it yourself
I have signed up for the Google Earth Engine here using my Google Account.
I have also followed all the prerequisites step for creating Project, Enabling Google Earth Engin API, Creating oAuth Client ID and Setting up everything.
The issue that I am facing here is that the code is not working as expected, when I went to the console and saw network tab, I realized there is a request of checkOrigin which always return
{
blocked:true
suppressed:false
valid:true
}
Same as in this question. While I have added the origin in Authorised JavaScript origins while creating API for Web Application.
NOTE: I am using wampserver and I have also added tested emails to the project.
Here is my current code:
<!DOCTYPE html>
<html>
<head>
<meta name="referrer" content="no-referrer-when-downgrade" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=myworkingGoolgeMapKey&callback=doNothing"></script>
<script src="https://ajax.googleapis.com/ajax/libs/earthengine/0.1.336/earthengine-api.min.js"></script>
<style>
/* Set the size of the div element that contains the map. */
#map-container {
height: 400px;
width: 100%;
background-color: #eee;
}
</style>
</head>
<body>
<!-- The "Sign in with Google" button, initially hidden. -->
<input
id="g-sign-in"
type="image"
src="https://developers.google.com/identity/images/btn_google_signin_light_normal_web.png"
onclick="onSignInButtonClick()"
alt="Sign in with Google"
hidden
/>
<!-- Element where map will be added. -->
<div id="map-container"></div>
<script>
function doNothing(){
console.log("ok");
}
function errorInit(){
console.log("initialize error");
}
// The OAuth Client ID from the Google Developers Console.
const CLIENT_ID = "myclientidFromoAuth.apps.googleusercontent.com";
// Initializes Maps JavaScript API and Earth Engine API, instructing the map
// to pull tiles from Earth Engine and to overlay them on the map.
function setUpMap() {
// Hide the sign-in button.
document.getElementById("g-sign-in").setAttribute("hidden", "true");
// Initialize the Earth Engine API. Must be called once before using the API.
ee.initialize();
// Get a reference to the placeholder DOM element to contain the map.
const mapContainerEl = document.getElementById("map-container");
// Create an interactive map inside the placeholder DOM element.
const embeddedMap = new google.maps.Map(mapContainerEl, {
// Pan and zoom initial map viewport to Grand Canyon.
center: {lng: -112.8598, lat: 36.2841},
zoom: 9,
});
// Obtain reference to digital elevation model and apply algorithm to
// calculate slope.
const srtm = ee.Image("CGIAR/SRTM90_V4");
const slope = ee.Terrain.slope(srtm);
// Create a new tile source to fetch visible tiles on demand and display them
// on the map.
const mapId = slope.getMap({min: 0, max: 60});
const tileSource = new ee.layers.EarthEngineTileSource(mapId);
const overlay = new ee.layers.ImageOverlay(tileSource);
embeddedMap.overlayMapTypes.push(overlay);
}
// Handles clicks on the sign-in button.
function onSignInButtonClick() {
// Display popup allowing the user to sign in with their Google account and to
// grant appropriate permissions to the app.
ee.data.authenticateViaPopup(setUpMap);
}
// If the user is signed in, display a popup requesting permissions needed to
// If the user is signed in, display a popup requesting permissions needed to
// run the app, otherwise show the sign-in button.
$(document).ready(function(){
ee.data.authenticateViaOauth(
// The OAuth Client ID defined above.
CLIENT_ID,
// Callback invoked immediately when user is already signed in.
setUpMap,
// Show authentication errors in a popup.
errorInit,
// Request permission to only read and compute Earth Engine data on behalf of
// user.
/* extraScopes = */ ['https://www.googleapis.com/auth/earthengine'],
// Show sign-in button if reusing existing credentials fails.
() => document.getElementById("g-sign-in").removeAttribute("hidden"),
// Don't require ability to write and access Cloud Platform on behalf of the
// user.
/* opt_suppressDefaultScopes = */ true
);
});
</script>
</body>
</html>

Microsoft bot framework v4 embed as minimizable window in website with javascript

I have developed a bot using Microsoft Bot Framework v4. It works as intended. Now I want to embed this bot into a website as collapsible/minimizable window using JavaScript not react.
I have come with this code snippet
<script>
(function () {
var div = document.createElement("div");
document.getElementsByTagName('body')[0].appendChild(div);
div.outerHTML = "<div id='botDiv' style='height: 38px; position: fixed; bottom: 0; z-index: 1000; background-color: #fff'><div id='botTitleBar' style='height: 38px; width: 400px; position:fixed; cursor: pointer;'>Bot</div><iframe width='400px' height='600px' src='https://webchat.botframework.com/embed/demoqnaptpl-bot?s=<secret-code>'></iframe></div>";
document.querySelector('body').addEventListener('click', function (e) {
e.target.matches = e.target.matches || e.target.msMatchesSelector;
if (e.target.matches('#botTitleBar')) {
var botDiv = document.querySelector('#botDiv');
botDiv.style.height = botDiv.style.height == '600px' ? '38px' : '600px';
};
});
}());
This embed bot as a collapsible window but didn't show welcome prompt on click of TitleBar.
This is first problem.
Second I want to implement this functionality without using React, only with JavaScript.
If using React is mandatory then how I implement this in my existing ASP.Net MVC App?
There is nothing wrong with your implementation. The problem is that the iframe version of Web Chat can't initiate a conversation off of a click. There are no hooks from which the hosting page can plug into to indicate an activity occurred and that Web Chat should then act on it.
iframe Web Chat simply connects to your bot and runs any welcome messages accordingly. When the page loads and the bot connects a single conversationUpdate activity type is generated that includes a 'membersAdded' property. As it originates from iframe Web Chat, the ChannelId will be set to 'webchat'.
This can be acted upon in your bot's activity handler, either in OnConversationUpdateActivityAsync or OnMembersAddedAsync. When a conversationUpdate activity is received you filter the channel id on 'webchat' and the name on your bot's name to send a message to the client. This message will already be loaded when the user clicks to maximize the embedded window.
protected override async Task OnMessageActivityAsync(ITurnContext<IMessageActivity> turnContext, CancellationToken cancellationToken)
{
if (turnContext.Activity.ChannelId == 'webchat' && turnContext.Activity.From?.Name == '<<YOUR BOT'S NAME')
{
// Echo back what the user said
await turnContext.SendActivityAsync(MessageFactory.Text($"Welcome to my bot!"), cancellationToken);
}
}
It should be noted that iframe Web Chat is intended as a simple solution for hosting a bot and is not intended for deep customizations. If you need to make a multitude of changes, I would highly recommend you consider BotFramework-WebChat which is designed specifically for that. It offers both a React and non-React version to work with.
Hope of help!

SDK for Facebook playable ads

I want to make HTML playable ad for Facebook platform and show user avatar in it. Is it possible?
According to docs playable ad must not make any HTTP request.
So I just can't make any auth request from playable ad. Seems it does not support Facebook SDK either in this case
Also playable code in the ad must use the JavaScript function FbPlayableAd.onCTAClick() when the viewer interacts chooses the call-to-action.
Is there any reliable documentation for FbPlayableAd methods?
Facebook doesn't appear to offer any helpful information beyond "you need to call the function".
When a playable is served, this <script> is injected into the <head>:
const FbPlayableAd = {
onCTAClick() {
window.parent.postMessage("onCTAClick", "*");
},
};
To get around the missing FBPlayableAd object, solution here was to insert the following <script> after the <body> tag:
<script type="text/javascript">
window.FBPlayableOnCTAClick = () => {
(typeof FbPlayableAd === 'undefined') ?
alert('FBPlayableAd.onCTAClick') : FbPlayableAd.onCTAClick();
}
</script>
And then the CTA button has this onClick:
onClick={() => window.FBPlayableOnCTAClick()}
This allowed us to clear issues with Babel complaining about the missing FbPlayableAd, works fine in test, and functions fine when uploaded to Facebook's Playable Preview tool.

Can a Web App access Oculus Proximity Sensor?

Is there a way to set a JS eventlistener on the state of the Oculus or Gear VR proximity sensor? My goal is to detect when someone has removed the headset? This will be used to trigger a reset of the web app to its initial state, ready for the next user. For instance, it might call location.reload().
The proximity sensor is not available to web pages as far as I know.
Does your scenario happen in the browser without opening new tabs? You could use the page visibility API:
<!DOCTYPE html>
<script>
document.addEventListener('visibilitychange', (e) => {
document.body.append(Date() + ' head set is ' + (document.hidden ? 'off' : 'on'));
document.body.append(document.createElement('br'));
});
</script>

Pay With Amazon Open in Popup Window

I am using Pay With Amazon Express Integration. In that I have to create custom Pay With Amazon button as described here:
Everything is working smoothly, however when I click on Pay With Amazon button, it opens window in same page. I want that window to open in popup.
Is there any way, I can make Pay With Amazon button to open window in popup.
Here is my code:
<script type="text/javascript">
OffAmazonPayments.Button("AmazonPayButton", app.conf.amazonPaySellerId, {
type: "hostedPayment",
hostedParametersProvider: function(done) {
$.getJSON(app.conf.siteUrl + 'generatePaymentRequestSignature', {
amount: $("#depositAmount").val() ? $("#depositAmount").val() : 10,
currencyCode: 'USD',
sellerNote: "Deposit to App",
returnURL : window.location.href,
sellerOrderId : localStorage.getItem("UserAccessToken")
},
function(data) {
if(data.status && data.code == 200) {
done(JSON.parse(data.data));
} else {
alert("Service is not available. Please try again later");
}
})
},
onError: function(errorCode) {
console.log(errorCode.getErrorCode() + " " + errorCode.getErrorMessage());
}
});
</script>
I wanted to open it in popup, because my app will be embedded by other sites using iframe. And when we click on Pay button, it opens in same window which is not functioning.
Note: There is option available for opening window in Popup, for Buttons generated using Button Generator Utility as said here, but don't know how it can be done using hostedPayment type.
Thanks for your time.
There isn't a way to do that currently since it is a hosted solution. The sample you referenced doesn't use the button generator it uses a standard Login with Amazon integration. A button generated with the button generator is considered a Express integration.
The only way to have a popup experience is to do a custom LPA integration but the Pay button will not work in a iframe.

Categories