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.
Related
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);
});
I would want to redirect the users to another part of my website once they've finished signing on the Docusign Iframe but I am having trouble getting out of the Iframe.
I know this question has already been asked here, but without answer : Here
And Here but the code the user provided doesn't work in my case, the new page doesn't even load :
<iframe id ="docusignFrame" name="docusignFrame" th:src="${docusignURL}" width="100%" height="900" onLoad="(this.contentWindow.location != '' ? DocusignCompleted(this.contentWindow.location) : void(0));"></iframe>
<script>
function DocusignCompleted(url) {
$("#docusignFrame").hide();
}
</script>
What I have tried :
PHP code :
$recipientViewRequest = new DocuSign\eSign\Model\RecipientViewRequest([
'authentication_method' => $authenticationMethod, 'client_user_id' => $clientUserId,
'recipient_id' => '1', 'return_url' => $baseUrl . '/' . "end_print.php",
'user_name' => $signerName, 'email' => $signerEmail
]);
$results = $envelopeApi->createRecipientView($accountId, $envelopeId,
$recipientViewRequest);
return $results['url'];
HTML code :
<iframe src="<?=$result?>" width="1000" height="1000"></iframe>
Is this possible, only using HTML and PHP or do I have to try something in JavaScript like the user on top.
Any kind of help would be appreciated, thanks.
I have found the solution in my case, it is to check the onload of the Iframe and then in Javascript to check that the GET["event"] of Docusign is exists.
In this case, if the signing process fails it will still change page, but you can change this part of the code to what event you want.
<html>
<head>
<script>
function handleIframe(str){
url = new String(str);
if (url.indexOf('?event=signing_complete') > 0) {
window.top.location.href = "signing_complete.php";
}
}
</script>
</head>
<body>
<iframe width="1000"
height="1000"
onload="handleIframe(this.contentWindow.location)"
frameborder="0"
src="<?=$result?>">
</iframe>
</body>
</html>
I'm working on a fix of the following error at the moment, if found I'll also post it here.
Uncaught DOMException: Blocked a frame with origin "http://localhost" from accessing a > cross-origin frame.
at new String ()
at handleIframe [...]
at HTMLIFrameElement.onload [...]
I recommend not using an iFrame for the signing ceremony:
iFrames, unless they use up 100% of the height and width of the screen, will mess up signing on mobile devices. (Tip: people love to sign on mobile devices.)
iFrames are not needed for maintaining your app's state: use your framework's session library for that.
The iFrame makes it more difficult to work with DocuSign (as you've experienced).
Conclusion: it's better and easier to simply redirect to the DocuSign Signing Ceremony. DocuSign will redirect the signer's browser back to you when they're done.
Added
Re: framework's session library
A session library enables your app to easily maintain state for a particular use throughout their session.
Eg, for PHP see https://www.php.net/manual/en/book.session.php
Re: iFrames not recommended:
See DocuSign docs here:
Note: Please redirect the client to the URL. iFrames should not be used, especially if the recipient is using a mobile or tablet.
Also, see the eg-03 series of examples for multiple languages. They all redirect the browser. See the list of repos.
I have a requirement of developing chrome extension which will display latest offers and coupons if I visit any affiliate store like amazon, aliexpress, flipkart, myntra etc.
When I visit their website and if my extension is installed then that website will should be injected with popup having offers and coupons of that website. (I have a webservice from where i will fetch offers and coupons).
It will be something like shown in below image.
I have tried something similar this way but i'm not sure it's the right way to do.
From Manifest.json
"content_scripts": [
{
"matches": ["*://*/*"],
"js": ["jquery.js","myscript.js"],
"css":["offers.css"]
}
],
"web_accessible_resources":[
"offers.html",
"offers.js"
]
myscript.js
var url = chrome.extension.getURL('offers.html');
var iframe = "<iframe src='"+url+"' id='IframeID'></iframe>";
var host = window.location.host;
var splittedHost = host.split('.');
var title = $(document).find("title").text();
if(title != ''){
$('body').append(iframe);
}
offers.html
<html>
<head>
<meta charset="UTF-8">
<title>test| Latest Offers</title>
<script src="jquery.js"></script>
<script src="offers.js"></script>
</head>
<body id="bodyText">
<h1>
Welcome
</h1>
...
</body>
</html>
Using This I got something like this in every page I visit:
That iframe is actually offers page and to get offers data I need host name from url. I tried getting window.localtion.host in offers.js injected in offers.html but I get chrome://extension.
Can anyone suggest me how to get host name in offers.js or is there any way I can append data in offers.html from myscripts.js? and where to call the API and how to append result in to iframe body?
Can anyone suggest me how to get host name in offers.js or is there any way I can append data in offers.html from myscripts.js?
As a quick solution, if you only need the URL, you can pass it as a query parameter:
// myscript.js
var url = chrome.extension.getURL('offers.html?url=' + window.location.host);
// offers.js
// Using https://developer.mozilla.org/en-US/docs/Web/API/URL
var host = new URL(location.href).searchParams.get('url');
If you do need to extract more information from the page, you can use postMessage for communication with the embedded window.
// myscript.js
iframe.contentWindow.postMessage(message, chrome.runtime.getURL(""));
// offers.js
window.addEventListener("message", function(event) {
var message = event.data;
/* ... */
});
This can be made bi-directional as well, though this is outside the question's scope.
where to call the API and how to append result in to iframe body?
Well, in offers.js, and then modify the DOM of that page.
Edit: Apparently, this is problematic as security policies from the page leak into the iframe, blocking a call to HTTP endpoint.
You should use HTTPS to begin with. It's the privacy of your users that is at stake.
You can work around it by delegating the API call to a background page using Messaging. A background page does not have this restriction.
..you still should be using HTTPS. This can be a reason for rejection when your extension is reviewed.
window.onerror=function(err,url,line){
if(err=='boom'){
console.log(true);
}
else{
console.log(false);
}};
console.error('boom');
This outputs undefined!
How can I tell in the java-script what text the error contains?
I'm trying to detect google chrome cast extension error
Failed to load resource: net::ERR_ADDRESS_UNREACHABLE chrome-extension://boadgeojelhgndaghljhdicfkmllpafd/cast_sender.js
related: Google chrome cast sender error if chrome cast extension is not installed or using incognito
My reasoning is
//tried to detect chromecast extension id: boadgeojelhgndaghljhdicfkmllpafd
//it looks like it is protected from detection (tried: http://blog.kotowicz.net/2012/02/intro-to-chrome-addons-hacking.html)
//if they are using:
//chrome flash ===flash (needs double click as &autoplay=1 lets the user do only one click but it side-effects with no video preview)
//chrome chromeCast===fastjs (google are being bad players here!)
//chrome ===slowjs (almost unusable website)
//chrome flash chromeCast===flash ffsake! (maybe try one video then see if there are errors and put a cookie, chromecast=true means that we got no errors so we don't need flash!) todo:how to analyse error text?
//if the user is on chrome and does not have flash then they are youtubes 'exception'! they will have very crap loading times
var chrome=0;
if(/Chrome/.test(navigator.userAgent)&&/Google Inc/.test(navigator.vendor)){
chrome=1;
function detectPlugin(substrs){
if(navigator.plugins){
for(var i=0,l=navigator.plugins.length;i<l;i++){
var plugin=navigator.plugins[i]
, haystack=plugin.name+plugin.description
, found=0;
for(var j=0;j<substrs.length;j++){
if(haystack.indexOf(substrs[j])!=-1){found++;}
}
if(found==substrs.length){return true;}
}}
return false;
}
var detectFlash=[/*"Shockwave",*/"Flash"]; //not entirely sure how relevant shockwave is here
if(detectPlugin(detectFlash)){chrome=2;}
}
then I create an iframe with:
'https://www.youtube.com/'+(chrome==2?'v':'embed')+'/'+ytvidcode
where ytvidcode is the id of the youtube video
v is for the depreciated flash embed while embed is for the html5 (broken/wont fix) embed
So the above code will detect chrome then will attempt to detect flash but cannot detect chrome-cast.
If the user has both chrome-cast and flash then (as it cannot detect chrome-cast/chrome-cast errors) it will force flash if present.
If flash is not present then the user will have a crappy youtube embed experience (they might have to use another browser)
Is it possible to detect the errors made by chrome-cast or any other footprint of its presence?
because if it is an installed extension then it should be fully utilized as flash is depreciated
window.onerror=function(e,url,line){console.dir(arguments);}//nope
window.onerror=function(e,url,line){console.dir(this);}//nope
https://github.com/Valve/fingerprintjs2
new Fingerprint2().get(function(result, components){
console.log(result); //a hash, representing your device fingerprint
console.log(components); // an array of FP components
});
components[13] ("regular_plugins") shows no Google cast even though I have installed it today
The only thing I can think of at this point is to time the loading of one of their videos (if they are on chome and it takes too long to load the test video then they must not have chrome cast), using this https://developers.google.com/youtube/iframe_api_reference#Getting_Started and a timer and a cookie after (so the test only happens once)... I will test this then perhaps report back
This lets the videos use embed if non chrome or if they are on chrome with cast extension enabled.
If they are on chrome without cast then it checks for flash and if they support flash then it uses v.
If they have chrome without ether cast or flash then (they will just get the chrome cast errors, it's their fault at that point!)
v is for the depreciated flash embed while embed is for the html5 (broken/wont fix) embed.
Could do with improvements maybe...
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//www.gstatic.com/cv/js/sender/v1/cast_sender.js"></script>
<script type="text/javascript">
function proceed(how){
document.getElementById('vid').innerHTML='<iframe src="https://www.youtube.com/'+how+'/M_lHI1opADk"></iframe>';
console.log(ischrome,iscast);
}
var ytv=['embed','v','embed','v'];
var ischrome=0;
var iscast=true;//maybe
if(/Chrome/.test(navigator.userAgent)&&/Google Inc/.test(navigator.vendor)){
ischrome=1;
setTimeout(function(){
try{new chrome.cast.SessionRequest('794B7BBF');}
catch(e){console.log(e);
iscast=false;}
finally{
(iscast==true)&&(ischrome=2);
if(ischrome==1){
function hasflash(){if(navigator.plugins){for(var i=0,l=navigator.plugins.length;i<l;i++){if((navigator.plugins[i].name+navigator.plugins[i].description).indexOf("Flash")!=-1){return true;}}}return false;}
if(hasflash()){ischrome=3;}
proceed(ytv[ischrome]);
}
else{
proceed(ytv[ischrome]);
}}},1000);}
else{proceed(ytv[ischrome]);}
</script>
</head>
<body>
<div id="vid"></div>
</body>
</html>
You can test this by installing the cast extension disabling/enabling and refreshing the page.
I'm coding a function to detect if users are using adblockers. When I detect it I send it to Site Catalyst (Omniture).
The problem is: Some adblockers use a black list to block requests and my company catalyst url it's in one of these lists.
When I look in the devtools they block the requests and show a ERR_BLOCKED_BY_CLIENT.
There's a way to check if a request was blocked by client using javascript?
Detecting ad blocker is easy check this answer it might be helpful How to detect ad blocking and show a message
You can check this out it might help
detect-adblocker
Its an implementation of timing answer
Add this before any script in the head tag:
<head>
<title></title>
<meta/>
<!--adBlocker detection code - START-->
<script src="//adblocker.fortiapp.com/ads.js"></script>
<script>
(function (i, o, g, r) {
i[o] = (typeof i[o] == typeof undefined) ? g : r
})(window, 'adblocker', true, false);
</script>
<!--adBlocker detection code - END-->
// Other scripts
</head>
Then later use it:
if (adblocker) {
// the add blocker is enabled
}else{
// ad blocker is not enabled
}