Well I want to use Google api translator in my website and when I am putting this api code in my html page it's working fine.
----------------------------------google translator code :-----------------------------
<div id="google_translate_element" ></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
I want to put the code in when I am putting this code in iframe then it shows everything.
But while changing the language it changes the language of elements in the iframe it doesn't affect outside the iframe.
I guess this is why the iframe tag is used to include an external document into an existing one.
Google Translator will translate the content of the iframe only, since it has no clue about the container document.
Please see also:
http://forums.macrumors.com/showthread.php?t=467248
Related
So I have QnA maker set up and connected to our Azure (I am totally new to Azure). I need to change the CSS of the Iframe from QNA maker, it is currently blue (as the default). I am following this guide to make it our company's colors:
https://blog.botframework.com/2017/10/11/customize-web-chat-websites/
I need to be able to clone this: https://github.com/Microsoft/BotFramework-WebChat/tree/master/src (which I already forked) into the current Azure build, which I am ultimately having a problem with.
I am sure I am overlooking something simple in Azure, but I just need to clone the source code to properly add the .css files I need to be able to edit the bot.
Currently, I have tried to grab the Iframe and change the CSS that way, but no dice (of course). All I need to do is change blue, to red, any way to do that will be helpful, whether that is changing the Iframe after it loads or by getting this guide to work for us. Thank you!
Refer to the github readme for more detail: https://github.com/Microsoft/BotFramework-WebChat
There are options:
Easiest: In any website, IFRAME the standard Web Chat channel
Easy: In your non-React website, run Web Chat inline
Easyish: In any website, IFRAME your Web Chat instance
Medium: In your React website, incorporate the Web Chat React
component
According to your requirements; running the bot in an iframe with custom style, you should read the Easyish section:
You can isolate your instance of Web Chat by running it inside an
IFRAME. This involves creating two web pages:
Your Web Chat instance, as shown above. (refer to Easy)
The hosting page, adding <iframe src="/path/to/your/webchat/instance" height="height" width="width" />
Based on the Easyish section (step 1), you need to first complete the Easy section. In your existing web app, add a new page with the following code (enable directline on Azure Bot settings):
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
</head>
<body>
<div id="bot"/>
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
<script>
BotChat.App({
directLine: { secret: direct_line_secret },
user: { id: 'userid' },
bot: { id: 'botid' },
resize: 'detect'
}, document.getElementById("bot"));
</script>
</body>
</html>
CUSTOMIZE your chat box style by editing the botchat.css file. You make a copy from https://cdn.botframework.com/botframework-webchat/latest/botchat.css and edit to your liking and put your own customized botchat.css to somewhere in your web app and change the href in the header instead of using the default one.
Finally for Easyish section step 2, you can create an iframe (content is step 1 web chat page) and embed that in your hosting page.
got some questions about the Google Tag Manager snippet. If I'm looking at the Google Demo Shop website the GTM implementation is like this :
<head>
<script async="" src="//www.googletagmanager.com/gtm.js?id=GTM-XXXXX"></script>
... some stuff ...
<noscript> <iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-5Q5LZH');
</script>
</head>
So basically everything is in the header. So first question, what is this line for :
<script async="" src="//www.googletagmanager.com/gtm.js?id=GTM-XXXXX"></script>
Second question, I've read that the code below:
<noscript> <iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-5Q5LZH');
</script>
could be implemented just after the opening of the body tag... and I've seen this a lot.
Is there some real differences between these different kind of implementation ? It doesn't seems to make any differences for Google Tag Assistant.
Thanks !
Initially Google Tag Manager recommended that the GTM snippet be located in the <body>, however it has recently updated its recomendation for it to be in the <head>.
This is most likely due to two reasons.
1) Apparently there were concerns about the way that the GTM library made modifications to the document object model which might have lead to conflicts for IE7 or older.
2) The <iframe> within the <noscript> is embedded content, rather then HTML, which is not allowed in the <head> of the document.
Recently Google has updated its guides and documentation to show a split implementation, with the in the <script> in the <head> and the <noscript><iframe> in the <body>.
This makes sense, as there is no reason why an asynchonrous JavaScript library needs to be in the <body>. As with all tracking its ideal to have the dependencies loaded as early as possible to ensure that your tracking is available prior to the user interacting with the website. However due to reason 2, the <noscript><iframe> is still recommended to be placed in the <body>.
So, to answer your questions:
1) the implementation on the Google Demo Store is incorrect, the entire code should not be placed in the <head>.
2) The <script async="" src="//www.googletagmanager.com/gtm.js?id=GTM-XXXXX"></script> in the Tag Assistant is not the actual code, but how the Tag Management extension interprets the code.
3) The <body> implementation was the previously recommended implementation, which is why you have seen it a lot.
4) Going forward, I would recommend the implementation advised by Google when setting up a Google Tag Manager container, spiting the placement between the <head> and the <body>. This means that GTM will load as early as possible, with an iframe backup if required.
5) Tag Assistant merely checks the code against rules manually set within the extension. The obvious caveat of this is that the extension needs to be kept up to date. An example of this is that recently the GTM container id's moved from 6 to 7 characters however the extension was not updated, leading to a lot of people getting errors in the Tag Assistant stating that their container ID was incorrect.
I'm currently integrating multiple microservices ui into a web portal. I have a navigation sidebar with link to microservices which will be loaded into an iframe in the central area.
I have lot of issue with iframe (security with frame option header, window sizing, etc...)
Do you know about a better alternative to an iframe?
If your micro services have a REST API available, you can use an embeded javascript code instead of iframe. Your embed code would look something like:
<div id="embed_id"></div>
<script type="text/javascript">
(function(){
var embededJavascriptElement = document.createElement("script");
embededJavascriptElement.type = "text/javascript";
embededJavascriptElement.charset= "utf-8";
embededJavascriptElement.id = "embed_script";
embededJavascriptElement.src = "<path to your script>";
(document.getElementsByTagName("head")[0] || document.getElementsByTagName("body") [0]).appendChild(embededJavascriptElement);
})();
</script>
The script above will insert another script tag into your DOM. That script will be interpreted, will search for the element with id ="embed_id" and will render the embeded code into that div (you need to implement this behavior).
You already tagged your question accordingly with spring-cloud and Zuul. I'd suggest this is exactly the way to go cause this way you can avoid the browsers sandbox as well as to manage CORS headers on your services. Just use start.spring.io and include Zuul as a requirement and define your rules. I suggest you start with static routes and if you then are familiar and confident with Zuul, embed a service registry and discovery like Eureka, consul or etcd.
I need to use the extra powers of the swfobject api. This object is a new way of embedding Youtube videos into web sites.
Pasting code that I found from Google's tutorial directly into the WordPress editor was in-effective. WordPress would not treat this as active code.
So, I created a new template file and inserted my code into that file. This worked relatively well. The code went live and I got the extra feature that I was looking for, which was that I am able to have the visuals of the video autoplay, and to have the sound muted by default.
However, this has messed up the layout and flow of my menus which where just above the video.
Can anyone tell me where to proper place to put this code is, or is this question too specific. If it will help you can see the messed up page at:
http://bestoftimesusa.com/home-mute-test/
and how it is supposed to look at:
http://bestoftimesusa.com
The fully functional code that got embedded is this:
<script type="text/javascript" src="/wp-includes/js/swfobject/swfobject.js"></script>
<div id="ytapiplayer">
You need Flash player 8+ and JavaScript enabled to view this video.
</div>
<script type="text/javascript">
var ytplayer = false;
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/v/IBjstQceGBk?enablejsapi=1&playerapiid=ytplayer&version=3&autoplay=1",
"ytapiplayer", "370", "238", "8", null, null, params, atts);
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.mute();
}
</script>
</div>
Unless you want the same youtube video to appear on all pages (of a certain type), I don't think putting that entire block in your template files makes sense. The only part that really makes sense for a template file is the first line. The lines after that are video-specific.
By default, WordPress filters out javascript from posts. You can disable that filtering with a plugin which would allow you to include javascript in your posts.
Using that plugin, you can set javascript filters on a global or per-post basis. It seems like a per-post basis would work for you so I'd go with that, just enabling it on the page I wanted.
Two last things:
You could put the first line in one of your template files to eliminate having to put that in every post
You have one opening <div> tag but two closing </div> tags, that could be expected, but I'd double check.
Since Google is going to pull the plug out of their translator API (by the end of this year), Is there someone who already found a good (free or $) alternative?
Try TranslateThis on http://translateth.is/...
Is very simple! To see the effects try this piece of code:
<!-- Begin TranslateThis Button -->
<div id="translate-this"><a style="width:180px;height:18px;display:block;" class="translate-this-button" href="http://translateth.is/">Translate</a></div>
<script type="text/javascript" src="http://x.translateth.is/translate-this.js"></script>
<script type="text/javascript">
TranslateThis();
</script>
<!-- End TranslateThis Button -->
Don't worry about the button aspect... You can customize it!
Google is offering and alternative to website translation. Its the GOOGLE WEB ELEMENTS, and some code from the google's web elements homepage itself for translation
<!-- Google Translate Element -->
<div id="google_translate_element" style="display:block"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: "af"}, "google_translate_element");
};</script>
Other alternatives:
Microsoft Translation Tools
they offer HTTP, SOAP and SDK interfaces for integration.
If you need just language detection, there is free API:
http://detectlanguage.com
It produces JSON output, just like Google Translate.