Google translate is not working on our website

Hi all,

We've been utilizing Weglot to assist with translating our website from English to Traditional Chinese. However, the translation quality hasn't met our expectations, requiring us to manually correct about 85% of the translations. Therefore, we're considering switching to Google Translate.

Site URL: https://www.dream2story.org/

We've added the following code to our Header:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

And the following code to our Footer:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
  var GoogleLanguages = 'en,zh-TW';
</script>

<div id="google_translate_element"></div>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: GoogleLanguages, layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false}, 'google_translate_element');
}
</script>
<script src="https://storage.googleapis.com/squarestylist/translate-style.js"></script>

Additionally, we've inserted the following code into Custom CSS:

@translate-bg: rgba(255, 255, 255, 0.5) !important;
@translate-border: black !important;
@downicon-color:red;
@langicon-color:blue;
@translate-text-color:black;
@translate-font:sans-serif;

#google_translate_element {
  z-index: 100;
  border-radius: 0;
  right: 2vw;
  left: auto;
  position: fixed;
  bottom: 1vh;
}

.goog-te-gadget-simple {
  background-color: @translate-bg !important;
 border-color:@translate-border !important;
  padding: 0.2em !important;
  border-radius: 4px !important;
  font-size: 1rem !important;
  line-height: 2rem !important;
  display: inline-block;
  cursor: pointer;
 
}
.goog-te-menu2 {
  max-width: 100%;
}
.goog-te-menu-value {
  display: flex;
  align-items: center;
  color: #fff;
}
.goog-te-menu-value:before {
  content: "\e894";
  margin-right: 0.5em;
 font-family: 'Material Icons';
 color:@langicon-color;
}
.goog-te-menu-value span {
  color:@translate-text-color;
  font-family:@translate-font;
}
.goog-te-menu-value span:nth-child(1) {
  position: relative;
  top: 0.07rem;
}

.goog-te-menu-value span:nth-child(5) {
  display: none;
}
.goog-te-menu-value span:nth-child(3) {
  border: none !important;
  font-family: 'Material Icons';
  display: flex;
  
}
.goog-te-menu-value span:nth-child(3):after {
  font-family: 'Material Icons';
  content: "\E5C5";
  font-size: 1.5rem;
  color:@downicon-color !important;
}
.goog-te-gadget-icon {
  display: none;
}
.goog-te-banner-frame.skiptranslate {
  display: none!important;
}

body {
  top: 0px !important;
}

header#header:not(.shrink) {
    top: 41px;
}


Despite these efforts, the translate widget appears on the site but doesn't translate anything. Could I please get some assistance with this? Thanks.

2 hours ago, Dream2story said:

Hi all,

We've been utilizing Weglot to assist with translating our website from English to Traditional Chinese. However, the translation quality hasn't met our expectations, requiring us to manually correct about 85% of the translations. Therefore, we're considering switching to Google Translate.

Site URL: https://www.dream2story.org/

We've added the following code to our Header:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

And the following code to our Footer:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
  var GoogleLanguages = 'en,zh-TW';
</script>

<div id="google_translate_element"></div>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: GoogleLanguages, layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false}, 'google_translate_element');
}
</script>
<script src="https://storage.googleapis.com/squarestylist/translate-style.js"></script>

Additionally, we've inserted the following code into Custom CSS:

@translate-bg: rgba(255, 255, 255, 0.5) !important;
@translate-border: black !important;
@downicon-color:red;
@langicon-color:blue;
@translate-text-color:black;
@translate-font:sans-serif;

#google_translate_element {
  z-index: 100;
  border-radius: 0;
  right: 2vw;
  left: auto;
  position: fixed;
  bottom: 1vh;
}

.goog-te-gadget-simple {
  background-color: @translate-bg !important;
 border-color:@translate-border !important;
  padding: 0.2em !important;
  border-radius: 4px !important;
  font-size: 1rem !important;
  line-height: 2rem !important;
  display: inline-block;
  cursor: pointer;
 
}
.goog-te-menu2 {
  max-width: 100%;
}
.goog-te-menu-value {
  display: flex;
  align-items: center;
  color: #fff;
}
.goog-te-menu-value:before {
  content: "\e894";
  margin-right: 0.5em;
 font-family: 'Material Icons';
 color:@langicon-color;
}
.goog-te-menu-value span {
  color:@translate-text-color;
  font-family:@translate-font;
}
.goog-te-menu-value span:nth-child(1) {
  position: relative;
  top: 0.07rem;
}

.goog-te-menu-value span:nth-child(5) {
  display: none;
}
.goog-te-menu-value span:nth-child(3) {
  border: none !important;
  font-family: 'Material Icons';
  display: flex;
  
}
.goog-te-menu-value span:nth-child(3):after {
  font-family: 'Material Icons';
  content: "\E5C5";
  font-size: 1.5rem;
  color:@downicon-color !important;
}
.goog-te-gadget-icon {
  display: none;
}
.goog-te-banner-frame.skiptranslate {
  display: none!important;
}

body {
  top: 0px !important;
}

header#header:not(.shrink) {
    top: 41px;
}


Despite these efforts, the translate widget appears on the site but doesn't translate anything. Could I please get some assistance with this? Thanks.

This is what I followed to get it to work on one of my sites. https://www.squarestylist.com/blog/multilanguage-squarespace

The site is https://sayreambrosio.com if you want to see how it works.

17 hours ago, sayreambrosio said:

This is what I followed to get it to work on one of my sites. https://www.squarestylist.com/blog/multilanguage-squarespace

The site is https://sayreambrosio.com if you want to see how it works.

Yes, thats the same link I just followed but no luck, but do you edit anything on those code? Thanks.

9 minutes ago, Dream2story said:

Yes, thats the same link I just followed but no luck, but do you edit anything on those code? Thanks.

I edited for color but that's about it. A few years ago Google pulled Google Translate services from China so that may be the root cause. It may not be a supported language with that retreat from offering the service there.

Can you add GG Translate again? We can check problem easier

On 3/31/2024 at 5:04 AM, Dream2story said:

Despite these efforts, the translate widget appears on the site but doesn't translate anything. Could I please get some assistance with this? Thanks.

I used GTranslate and it worked really well.  You just need to inject the code into the website header on the website's tools. 

The adapted code may function like this:

<style>
    .gtranslate_wrapper {
        position: fixed;
        bottom: 10px; /* Distance from the bottom */
        right: 10px; /* Distance from the right */
        background-color: rgba(0, 0, 0, 0.7); /* Transparent black background */
        color: white; /* White text color */
        padding: 10px; /* Internal padding */
        border: 1px solid white; /* White border with 1px thickness */
        font-family: 'Montserrat', sans-serif; /* Montserrat font */
        font-size: 10px; /* Font size 10 pixels */
        z-index: 1000; /* Ensure it stays above other elements */
    }

    @media (max-width: 767px) {
        .gtranslate_wrapper {
            bottom: 10px; /* Distance from the bottom on mobile */
            right: 10px; /* Distance from the right on mobile */
        }
    }
</style>

<div class="gtranslate_wrapper"></div>

<script>
    window.gtranslateSettings = {
        "default_language": "zh-TW", /* Set default language to Traditional Chinese */
        "languages": ["zh-TW", "en"], /* Include only Traditional Chinese and English */
        "detect_browser_language": false, /* Disable browser language detection */
        "wrapper_selector": ".gtranslate_wrapper"
    };
</script>

<script src="https://cdn.gtranslate.net/widgets/latest/lc.js" defer></script>
 

Hope it help.