I trying to add helpcrunch chat in my mobile app via WebView. For it I need to add a few scripts in HTML:
<script type="text/javascript">
(function(w,d){
w.HelpCrunch=function(){w.HelpCrunch.q.push(arguments)};w.HelpCrunch.q=[];
function r(){var s=document.createElement('script');s.async=1;s.type='text/javascript';s.src='https://widget.helpcrunch.com/';(d.body||d.head).appendChild(s);}
if(w.attachEvent){w.attachEvent('onload',r)}else{w.addEventListener('load',r,false)}
})(window, document)
</script>
<script type="text/javascript">
HelpCrunch('init', 'app', {
applicationId: 2,
applicationSecret: 'appKEY'
})
HelpCrunch('showChatWidget');
</script>
In IOS all work well. But on android, this script doesn't work.
Code with my WebView:
<WebView
injectedJavaScript={INJECTED_SCRIPTS}
onMessage={this.onMessage}
javaScriptEnabled={true}
automaticallyAdjustContentInsets={false}
source={{ html: `<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1 id="about">regnergioi</h1>
</body>
</html>` }}
style={{ marginTop: 30, marginBottom: 10, height: 400 }}
renderError={(a) => this.handleError(a)}
onError={(a) => this.handleError(a)}
/>
I can't really help with the WebView problem but I can suggest a unofficial HelpCrunch library for React Native.
It's a bit old but I think it will work fine after updating the SDK versions to latest for both platforms
https://www.npmjs.com/package/react-native-helpcrunch
Latest versions:
Android: 3.1.4 update here
iOS: 3.3.6 update here
Related
I have a simple app I made in vanilla JS that I want to convert to a mobile app. I can do it easily with Cordova, but I can't seem to get Admob ads to show up with any of the plugins I tried.
On this one I am using "admob-plus-cordova". I created it with the example app ID, and followed the instructions in the documentation. I just can't figure out why it doesn't work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta
name="viewport"
content="initial-scale=1, width=device-width, viewport-fit=cover"
/>
<meta name="color-scheme" content="light dark" />
<link rel="stylesheet" href="css/index.css" />
<title>Admob</title>
</head>
<body>
<div></div>
<script src="cordova.js"></script>
<script type="text/javascript">
let banner
document.addEventListener(
"deviceready",
async () => {
await admob.start()
banner = new admob.BannerAd({
adUnitId: " ca-app-pub-3940256099942544/6300978111",
})
banner.on("impression", async (evt) => {
await banner.hide()
})
await banner.show()
},
false
)
</script>
</body>
</html>
Example:
Code that works and displays google translate toolbar:
<!doctype html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'pl'
}, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</head>
<body>
<div id="google_translate_element"></div>
</body>
</html>
Code that does not display google translate toolbar:
<!doctype html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.3.0/prototype.js"></script>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'pl'
}, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</head>
<body>
<div id="google_translate_element"></div>
</body>
</html>
The difference: adding prototype.js.
Error in the console:
enter image description here
What should I do for the google translate element to work with the prototype.js?
I would like to add that about 3 months ago everything was working fine.
There is a possibility that you are hit with the same conflict that happens on Google Maps Javascript API.
Try my answer on this question
https://stackoverflow.com/a/50594159/341491
I came across a problem using Lottie for the first time in my webpack project.
As I usually do, i put the script tag with the Lottie src path at the end of the body tag, but this resulted in an error in the console: bodymovin is not defined at...
I think it's because I'm using webpack, that the Lottie script is loaded in after my index.js?
I'm not really sure where i should put my script tag then.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<canvas id="canvas" width="200" height="200"></canvas>
</div>
<h1>Test</h1>
<button class="button">Press me to light led</button>
<p class="potentiometer"></p>
<div class="bm"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.min.js"></script>
</body>
</html>
const init = () => {
const bm = document.querySelector('.bm');
const anim = bodymovin.loadAnimation({
container: bm,
path: `../assets/eye.json`,
renderer: 'canvas',
loop: true,
autoplay: true
})
My HTML File looks like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Unbenannt</title>
<!--Adobe Edge Runtime-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<script type="text/javascript" charset="utf-8" src="http://animate.adobe.com/runtime/5.0.0/edge.5.0.0.min.js"></script>
<style>
.edgeLoad-EDGE-720796712 { visibility:hidden; }
</style>
<script>
AdobeEdge.loadComposition('OrgAnimation', 'EDGE-720796712', {
scaleToFit: "none",
centerStage: "none",
minW: "0",
maxW: "undefined",
width: "1250px",
height: "800px"
}, {"dom":{}}, {"dom":{}});
</script>
<!--Adobe Edge Runtime End-->
</head>
<body style="margin:0;padding:0;">
<div id="Stage" class="EDGE-720796712">
</div>
</body>
</html>
Then I have the JS-File called "OrgAnimation_edge.js" so I'm assuming it gets loaded at
AdobeEdge.loadComposition('OrgAnimation'...
It works -
But now my Question: Is it possible to put the js code from OrgAnimation_edge.js into the HTML file somehow and make it work with just that single file? I couldn't figure it out :(
<?xml version="1.0" encoding="utf-8"?><widget xmlns="http://www.w3.org/ns/widgets" xmlns:rim="http://www.blackberry.com/ns/widgets" version="1.0.0" rim:header="ipaidabribenaija.com Breaking News and News Updates">
<name>ipaidabribenaija.com</name>
<description>First for Breaking News and News Updates</description>
<content src="index.html" rim:allowInvokeParams="true"/>
<author href="http://www.centurymegasystem.com" rim:copyright="Copyright 2012 wwww.ipaidabribenaija.com" email="josiahaccounts#gmail.com" xml:lang="en" its:dir="rtl" >Josiah Gerald</author>
<feature id="blackberry.invoke.BrowserArguments" />
<rim:connection timeout="25000">
<id>TCP_WIFI</id>
<id>MDS</id>
<id>BIS-B</id>
<id>TCP_CELLULAR</id>
<id>WAP2</id>
<id>WAP</id>
</rim:connection>
<license>Copyright (c) 2012 ipaidabribenaija.com.</license>
<icon src="images/icon.png" /></widget>
<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Breaking News and News Updates</title>
<script type="text/javascript">
var args = new blackberry.invoke.BrowserArguments('http://www.ipaidabribenaija.com');
blackberry.invoke.invoke(blackberry.invoke.APP_BROWSER, args);
/*function openWebLinkInBrowser() {
// open web link in browser
blackberry.invoke.invoke({target: "sys.browser",uri: "http://www.ipaidabribenaija.com"});
}
openWebLinkInBrowser();*/
</script>
I am a newbie in this programming. I am given a task to develop an app for BlackBerry.
Once the app is launched, the browser will open to a specific URL.
I got a java code that does this. How can I achieve the same with BlackBerry Webwork API.
The code above is what I have achieve so far. However, the app is not launching the browser on load.
Thanks for your time and idea in advance.
<?xml version="1.0" encoding="utf-8"?><widget xmlns="http://www.w3.org/ns/widgets" xmlns:rim="http://www.blackberry.com/ns/widgets" version="1.0.0" rim:header="ipaidabribenaija.com Breaking News and News Updates">
<name>ipaidabribenaija.com</name>
<description>First for Breaking News and News Updates</description>
<content src="index.html" rim:allowInvokeParams="true"/>
<author href="http://www.centurymegasystem.com" rim:copyright="Copyright 2012 wwww.ipaidabribenaija.com" email="josiahaccounts#gmail.com" xml:lang="en" its:dir="rtl" >Josiah Gerald</author>
<feature id="blackberry.invoke.BrowserArguments" />
<feature id="blackberry.identity" />
<feature id="blackberry.invoke" />
<rim:connection timeout="25000">
<id>TCP_WIFI</id>
<id>MDS</id>
<id>BIS-B</id>
<id>TCP_CELLULAR</id>
<id>WAP2</id>
<id>WAP</id>
</rim:connection>
<license>(c) 2012 ipaidabribenaija.com.</license>
<icon src="images/icon.png" /></widget>
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Breaking News and News Updates</title>
<script type="text/javascript">
var args = new blackberry.invoke.BrowserArguments('http://www.ipaidabribenaija.com');
blackberry.invoke.invoke(blackberry.invoke.APP_BROWSER, args);
blackberry.app.exit();
</script>
The above code works fine, i tested it on BB simulator 9930.
Thanks for the help #HelpMeToHelpYou.
<script type="text/javascript">
var args = new blackberry.invoke.BrowserArguments('http://www.blackberry.com');
blackberry.invoke.invoke(blackberry.invoke.APP_BROWSER, args);
</script>
You must declare the feature element(s) below in your configuration document:according to following image
More information please visit
https://developer.blackberry.com/html5/apis/blackberry.invoke.browserarguments.html
Sample Code:
Please make sure that config files as following
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets"
xmlns:rim="http://www.blackberry.com/ns/widgets"
version="1.0" rim:header="WebWorks Sample">
<feature id="blackberry.invoke" />
<feature id="blackberry.invoke.BrowserArguments" />
<feature id="blackberry.identity" />
<name>Hello World</name>
<description>This is HelloWorld.</description>
<content src="index.html"/>
</widget>
And index.html as
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,
user-scalable=no">
<title>Hello World</title>
<script type="text/javascript">
function myFunction()
{
var args = new blackberry.invoke.BrowserArguments('http://www.blackberry.com');
blackberry.invoke.invoke(blackberry.invoke.APP_BROWSER, args);
}
</script>
</head>
<body onload="myFunction()">
<p>Hello World!</p>
</body>
</html>
try this