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