Jump to content

Adding Google Translate widget to the top of a website

Recommended Posts

  • 5 months later...

Add to Code Block

<div id="google_translate_element"></div>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...

Tuanphan, when I use the the code below, it works. However, on the mobile site, the the hamburger menu on the right side drops down but it's inoperable but the drop down menu for Google Translate works flawlessly. It's installed on the Bedford template (7.0). Please help!

 

<div id="google_translate_element"></div>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>
Edited by uronlinebizmgr
Link to comment
On 12/5/2020 at 9:14 AM, uronlinebizmgr said:

Tuanphan, when I use the the code below, it works. However, on the mobile site, the the hamburger menu on the right side drops down but it's inoperable but the drop down menu for Google Translate works flawlessly. It's installed on the Bedford template (7.0). Please help!

 


<div id="google_translate_element"></div>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>

Can you share site url? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 months later...
  • 2 weeks later...
On 3/9/2021 at 12:45 AM, PF3 said:

Was this issue every resolved?  I have the same problem, once I inject the code or add a code block the mobile hamburger options are disabled.

www.6jdc.org

Hi. Can you add GG Translate code & let me know? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
On 10/28/2020 at 9:56 AM, tuanphan said:

Add to Code Block


<div id="google_translate_element"></div>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>

 

When i add this code to the code injection in advanced options it does not operate properly. It shows a broken translator symbol and does not translate the website. Is there a work around this? 

Screen Shot 2021-05-06 at 11.08.50 PM.png

Link to comment
  • Susana_SQSP changed the title to Adding Google Translate widget to the top of a website
11 hours ago, sj1005 said:

When i add this code to the code injection in advanced options it does not operate properly. It shows a broken translator symbol and does not translate the website. Is there a work around this? 

Screen Shot 2021-05-06 at 11.08.50 PM.png

What is your site url?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 weeks later...

Hello! I'm having the same problem on my site https://alanonsandiego.org. Our site is using the¬†Version 7.0‚Äď Bedford family (Bedford template).

I used the following code and the Google Translator works just fine. But it causes the navigation menu to stop working. The menus appears, but clicking on any menu item does nothing. I've search this forum and the entire Internet and have not found a solution.

If you have a fix to this problem, please share it. Your assistance will be very much appreciated!

HTML:

<div id="google_translate_wrapper">
    <div id="google_translate_element"></div>
 
    <script type="text/javascript">
        function googleTranslateElementInit() {
            new google.translate.TranslateElement({ pageLanguage: 'en', includedLanguages: 'en,es' }, 'google_translate_element');
        }
    </script>
 
    <script type="text/javascript"
        src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>

CSS

#google_translate_wrapper { position: fixed; bottom: 0px; right: 0px; z-index:2; }

Screenshot

image.png.67caedb0661f0d2513f96cee12abbf09.png

Note: The Translator has been removed from the site until the menu problem can be resolved.

Edited by MartinD
Link to comment
On 5/31/2021 at 2:53 AM, MartinD said:

Hello! I'm having the same problem on my site https://alanonsandiego.org. Our site is using the¬†Version 7.0‚Äď Bedford family (Bedford template).

I used the following code and the Google Translator works just fine. But it causes the navigation menu to stop working. The menus appears, but clicking on any menu item does nothing. I've search this forum and the entire Internet and have not found a solution.

If you have a fix to this problem, please share it. Your assistance will be very much appreciated!

HTML:

<div id="google_translate_wrapper">
    <div id="google_translate_element"></div>
 
    <script type="text/javascript">
        function googleTranslateElementInit() {
            new google.translate.TranslateElement({ pageLanguage: 'en', includedLanguages: 'en,es' }, 'google_translate_element');
        }
    </script>
 
    <script type="text/javascript"
        src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>

CSS

#google_translate_wrapper { position: fixed; bottom: 0px; right: 0px; z-index:2; }

Screenshot

image.png.67caedb0661f0d2513f96cee12abbf09.png

Note: The Translator has been removed from the site until the menu problem can be resolved.

Can you dupliacate the site & add gg translate & share url? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
12 hours ago, tuanphan said:

Can you dupliacate the site & add gg translate & share url? We can check easier

Thank you for your response, @tuanphan! Here is a duplicate site with the Google Translator code added.
maroon-flatworm-xhb8.squarespace.com

Edited by MartinD
Link to comment
On 6/2/2021 at 7:38 AM, MartinD said:

Thank you for your response, @tuanphan! Here is a duplicate site with the Google Translator code added.
maroon-flatworm-xhb8.squarespace.com

The site is private. Can you setup password & share url again?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
11 hours ago, MartinD said:

 

Thank you, @tuanphan. This will get you in: 
https://maroon-flatworm-xhb8.squarespace.com/
FixTranslator

Add to Design > Custom CSS

div#sidecarNav {
    z-index: 975000;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 6 months later...

@tuanphan Hi Tuanphan, I realize this question was answered some time ago, but I was wondering what to do in a situation where my header nav covers up the translate div while it's in a fixed position. I can add margin to it w/ CSS but since it's in a fixed state, the header nav's additional margin is including on scroll so that there's a gap between the header nav and top of the browser window. 

Edited by AppleTreeDC
Included additional context and clarification
Link to comment
On 12/15/2021 at 5:34 AM, AppleTreeDC said:

@tuanphan Hi Tuanphan, I realize this question was answered some time ago, but I was wondering what to do in a situation where my header nav covers up the translate div while it's in a fixed position. I can add margin to it w/ CSS but since it's in a fixed state, the header nav's additional margin is including on scroll so that there's a gap between the header nav and top of the browser window. 

Can you share link to your site? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 weeks later...
Quote

 

<div id="google_translate_element"></div>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>

 

Hi folks (esp guru @tuanphan),
when I copy and paste the exact code as shown above (per other posts)

Squarespace tells me I am missing an opening "{"
If I try to fix and add one in, randomly, it then says there's a syntax error on line 1.

I am trying to add google translate to the top of header- any tips or ideas? complete novice at coding here- is there a step 1 that I am missing? thank you!

Edited by Calley
Link to comment
On 1/11/2022 at 1:03 AM, Calley said:

Hi folks (esp guru @tuanphan),
when I copy and paste the exact code as shown above (per other posts)

Squarespace tells me I am missing an opening "{"
If I try to fix and add one in, randomly, it then says there's a syntax error on line 1.

I am trying to add google translate to the top of header- any tips or ideas? complete novice at coding here- is there a step 1 that I am missing? thank you!

Hi,

It looks like you are adding to Design > Custom CSS

You need to Add to Settings > Advanced > Code Injection > Footer

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 weeks later...
On 2/9/2022 at 1:16 PM, kurtiskronk said:

I'm trying to get this working in my header on Squarespace 7.1 - I'd like to replace the social media icons with the Google Translate thing. Currently I have the code injection in Settings >Advanced > Code Injection > Header and then the CSS in Design > Custom CSS

https://www.abluetexas.org

Can anyone help?

It looks like you removed it. Do you still need help?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 weeks later...
On 3/2/2022 at 4:40 AM, kurtiskronk said:

I don't remember why I removed it, but yes I would love to get that integrated. Sorry, I never received a notification when you responded.

I don't seegg translate. Can you bring it back?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 months later...

@tuanphan

I'm having a similar issue: I can apply the translation dropdown and it does work, but it fluctuates with the navigation bar or falls behind it. On desktop with an announcement banner, it falls behind the bar. With a bar or without look equally terrible on mobile. I'd like to place the translation function above the navigation bar and/or the announcement bar, I just can't get it to stay put.

Can you help?  

https://kitchenworkfoundation-cms.squarespace.com/ 

password: kwf2022

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

√ó
√ó
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.