CINXE.COM

Website Translator Widget

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="robots" content="index, follow"> <meta name="referrer" content="always"> <meta name="viewport" content="initial-scale=1"> <link rel="stylesheet" media="all" href="/assets/css/template.css"> <link rel="icon" type="image/png" href="/assets/images/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/assets/images/favicon-194x194.png" sizes="194x194"> <link rel="icon" type="image/png" href="/assets/images/favicon-96x96.png" sizes="96x96"> <link rel="icon" type="image/png" href="/assets/images/favicon-192x192.png" sizes="192x192"> <link rel="icon" type="image/png" href="/assets/images/favicon-16x16.png" sizes="16x16"> <title>Website Translator Widget</title> <meta name="description" content="Language selector widget for websites with multiple configurable optoins."> <meta property="fb:admins" content="1286046582"> <meta property="og:image" content="https://gtranslate.io/assets/images/gtranslate-home-1200x630.jpg"> <meta name="uri-translation" content="on"> <link rel="canonical" href="https://gtranslate.io/website-translator-widget"> <style> @font-face {font-family:proxima-nova;src:url(//gtranslate.io/assets/fonts/proxima-nova-400.woff2) format(woff2),url(//gtranslate.io/assets/fonts/proxima-nova-400.woff) format(woff);font-style:normal;font-weight:400;font-display:optional} @font-face {font-family:proxima-nova;src:url(//gtranslate.io/assets/fonts/proxima-nova-600.woff2) format(woff2),url(//gtranslate.io/assets/fonts/proxima-nova-600.woff) format(woff);font-style:normal;font-weight:600;font-display:optional} html {box-sizing:border-box;color:#4e535b;font-family:proxima-nova,sans-serif;-webkit-font-smoothing:antialiased;font-weight:400;line-height:1.5;height:100%} body{margin:0;background-color:#141517;height:100%} *, *::after, *::before {box-sizing:inherit} h1 {margin:0;padding:0} p {margin-bottom:2em} a {text-decoration:none} @media screen and (min-width: 980px) {html {font-size:110%}} .logo-container {position:absolute;float:left} .masthead-page-block {min-height:18em!important} .signup-block {padding:4em 0!important} .signup-original-language-select {width:62%} .card-element-wrapper {display:inline-block;width:75%} #card-element {padding-top:20px;width:100%} #card-element.StripeElement--empty, #card-element.StripeElement--invalid {background:#fae8e8!important;border-color:#fc4e51} span.select2-selection--multiple {background-color:#e3e4e7 !important;border:0px !important;border-bottom:2px solid #c8cacf!important;min-height:60px!important;border-radius:0px!important} .input-row-error span.select2-selection--multiple {border-color:#fc4e51!important} ul.select2-selection__rendered {padding-top:11px !important;padding-left:18px!important} li.select2-selection__choice {background-color:#efefef !important;border-radius:0px!important;border:none!important} #target_lang-error {background:transparent!important;bottom:0;color:#a0a3a9;display:inline-block;min-height:.3em;opacity:1;padding:.2em 0;position:absolute} select{height:58px;box-sizing:border-box;vertical-align:middle} /* base */ .input-container{color:#333;margin-top:0;padding:0 9em;position:relative} .input-container:after{content:' ';clear:both;display:block} .input-row{margin-bottom:.1em;padding-bottom:1em;position:relative;min-height:60px;box-sizing:content-box} .input-row-left{float:left;width:49%} .input-row-left>.input-select-wrapper,.input-row-left>input,.input-row-left>label{width:100%} .input-row-right{float:right;width:49%} .input-row-right>.input-select-wrapper,.input-row-right>input,.input-row-right>label,.input-row-right>select{width:100%} .input-row-full{clear:left}.input-row-full textarea,.input-row-full>input,.input-row-full>label{width:100%}.input-section{display:inline-block}.input-section-full{display:block}.input-section-row{margin-bottom:-.5em}.input-subinfo{font-size:.95em;margin-top:.5em}.input-text{-webkit-appearance:none;background-color:#e3e4e7;border-bottom:2px solid #c8cacf;border-left:0;border-right:0;border-top:0;box-sizing:border-box;height:60px;padding:.5em 1em;width:75%}.input-text:last-child{margin-bottom:0}.input-textarea{height:13em;padding:.6em .8em}.input-select-wrapper{background-color:#e3e4e7;border-bottom:2px solid #c8cacf;box-sizing:border-box;display:inline-block;overflow:hidden;vertical-align:middle;position:relative;padding-right:1em}.input-select-wrapper:after,.input-select-wrapper:before{border:solid transparent;border-width:7px;content:'';position:absolute;right:.8em;top:50%;z-index:1}.input-select-wrapper:before{border-top-color:#4e535b;margin-top:6px}.input-select-wrapper:after{border-bottom-color:#4e535b;margin-top:-18px} .input-select-wrapper>select{opacity:0;position:relative;z-index:1;border:none;-webkit-appearance:none;-moz-appearance:window} .input-select-wrapper>select,.input-select-wrappertext{height:58px;line-height:58px;padding:0 1.8em 0 1em;width:100%} .input-select-wrappertext{left:0;position:absolute;top:0;z-index:0}.input-radio-unit{display:inline-block;margin-right:1em}.input-radio-unit:last-child{margin-right:0}.input-checkbox,.input-radio{display:inline-block}.input-checkbox-wrapper,.input-radio-wrapper{position:relative;display:inline-block;margin:.55em 0;vertical-align:middle}.input-checkbox-wrapper .input-checkbox,.input-radio-wrapper .input-radio{left:0;opacity:0;position:absolute;top:0}.input-checkbox-wrapperlabel{background-color:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border:2px solid #333;display:block;height:20px;width:20px}.input-checkbox:checked+.input-checkbox-wrapperlabel{background:url(/assets/images/tmp-checker@2x.png) #333 50% 50% no-repeat;background-size:12px;}.input-radio-wrapperlabel{-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;border:2px solid #333;display:block;height:20px;width:20px}.input-radio:checked+.input-radio-wrapperlabel:before{-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;background-color:#333;content:'';display:block;height:70%;margin:15%;width:70%}.input-success{background-color:#edfae2;border-color:#6cbd29}.input-error,.input-row-error .input-text{background:#fae8e8!important;border-color:#fc4e51!important}.input-row-error label:first-child{color:#fc4e51} .input-row-error .input-select-wrapper+label,.input-row-error input+label,.input-row-error textarea+label, #signup-card-error, label.suggestion{background:transparent!important;bottom:0;color:#a0a3a9;display:inline-block;min-height:.3em;opacity:1;padding:.2em 0;position:absolute;right:0}.input-error-label a{text-decoration:underline}.input-submit{float:right}a.input-link{color:#f15151;position:absolute;right:0;text-decoration:underline;top:117px}.input-select-wrapper.width-1-2,.input-text.width-1-2{margin-right:3%;width:35.7%}.input-row-left>.width-1-2,.input-row-right>.width-1-2{width:47.7%}.input-error-label+.input.width-1-2,.input-select-wrapper.width-1-2+.input-select-wrapper.width-1-2,.input.width-1-2+.input.width-1-2{margin-right:0}.label-left,.label-top{color:#000;display:inline-block;font-family:"Helevetica Neue",Helvetica,Arial;font-size:.9em;font-weight:700;letter-spacing:1px;line-height:2.3em;text-transform:uppercase;vertical-align:middle;width:24%}.label-top{display:block;margin:0 0 1em;width:auto}.label-right{display:inline-block;line-height:2em;margin-left:.3em;vertical-align:middle}.label-right+.input-radio{margin-left:2.5em}.label-required:after{color:red;content:' *'}.label-extra-info{color:#ccc;position:absolute;right:0;top:21px}.button-container{position:relative;float:left;margin-top:9px}.button-container-loading .button-base,.button-container-loading .button-base:hover{background-color:#c1c1c1;color:transparent;cursor:default;text-shadow:none}.button-container-loading .loading-spinner-small{display:block}.loading-spinner-small{background:url(/_img/animation-loading-small.gif) no-repeat;display:none;height:16px;width:16px;position:absolute;top:50%;left:50%;margin:-8px}.loading-spinner-small-sprite{background:url(/_img/sprite-loading-small.png) no-repeat;-webkit-animation:spinner-small .8s steps(8,end) infinite;-moz-animation:spinner-small .8s steps(8,end) infinite;animation:spinner-small .8s steps(8,end) infinite}@-webkit-keyframes spinner-small{from{background-position:0 0}to{background-position:0 -128px}}@-moz-keyframes spinner-small{from{background-position:0 0}to{background-position:0 -128px}}@keyframes spinner-small{from{background-position:0 0}to{background-position:0 -128px}}.button-base{background-color:#000;border:none;color:#fff;display:inline-block;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:.9em;font-weight:500;letter-spacing:2px;margin-bottom:.35em;padding:1.2em 2em;text-align:center;text-decoration:none;text-transform:uppercase;transition:background 100ms linear}.button-base[disabled],.button-base[disabled]:hover{background-color:#999;cursor:default}a.button-base:hover{text-decoration:none}.button-base:hover{background-color:#2a2a2a}.button-base:visited{color:#fff}.button-gray{background-color:#c1c1c1}.button-gray:hover{background-color:#b3b3b3}.button-transparent,.button-transparent:active,.button-transparent:visited{background-color:transparent;font-weight:400;line-height:1em;border:2px solid #e6e6e6;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;color:#666;padding:.9em 20px;top:0}.button-transparent:hover{background:0 0;color:#666;border-color:#ccc}.container-darkgray .button-transparent{background-color:transparent;border-color:#919191;color:inherit}.container-darkgray .button-transparent:hover{background-color:transparent;background-color:rgba(0,0,0,.1);border-color:#919191}.button-green{background-color:#57c700;color:#fff}.button-green:hover{background-color:#51ba00}.button-red{background-color:#f40;color:#fff}.button-red:hover{background-color:#e53d00}.button-social{line-height:2.8em;margin-right:.7em;padding:.5em 1.5em}.button-social:before{font-family:pingdom-iconsregular;font-size:1.45em;margin-right:.4em}.button-small,.button-small:active,.button-small:visited{font-weight:400;padding:.6em .8em;text-transform:none}.button-spaced{margin:2em 2em 0 0}.button-base .icon-pingdom{cursor:inherit}.container.no-padding{padding:0}.container-inner{clear:both;margin:0 auto;max-width:990px;padding:0 20px;position:relative}.container-inner-narrow{max-width:770px}.container-tight{padding:50px 0}.container-tighter{padding:0}.container-narrow{max-width:700px}.container-black{color:#7e7e7e;background:#000}.container-black a{color:#fff;font-weight:700}.container-black h1,.container-black h2,.container-black h3{color:#fff}#disclaimer{font-size:11px;font-weight:700;font-family:Helvetica,Arial,sans-serif;color:#666}#disclaimer a{color:#666;text-decoration:none;white-space:nowrap}#disclaimer a:hover{color:#fff000;text-decoration:none}.width-1-2{width:50%}.width-1-3{width:33.33%}.width-2-3{width:66.67%}.tooltip-container{margin:16px 0 0 8px;position:relative;width:10%;}.tooltip-container:hover>.tooltip-content{opacity:1;-webkit-transition:opacity 100ms ease;-moz-transition:opacity 100ms ease;transition:opacity 100ms ease;visibility:visible}.tooltip-anchor{background-color:#e3e4e7;border-radius:50%;box-shadow:1px 2px #c8cacf;width:2em;line-height:2.3em;height:2em;display:inline-block;text-align:center;color:#a7aaaf}.tooltip-content{-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;left:37px;color:#999;font-size:14px;top:-65px;opacity:0;-webkit-transition:visibility 0s linear 100ms,opacity 100ms ease;-moz-transition:visibility 0s linear 100ms,opacity 100ms ease;transition:visibility 0s linear 100ms,opacity 100ms ease;padding:15px 20px;visibility:hidden;width:180px;z-index:1;position:absolute;background:#f9f9fa;border:1px solid #e3e4e7}.tooltip-content:after,.tooltip-content:before{right:100%;top:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}.tooltip-content:after{border-color:rgba(249,249,250,0);border-right-color:#f9f9fa;border-width:13px;margin-top:-13px}.tooltip-content:before{border-color:rgba(227,228,231,0);border-right-color:#e3e4e7;border-width:14px;margin-top:-14px}.tooltip-content strong{color:#2f3238;font-size:1.2em;margin-bottom:1.5em}.tooltip-content>p{line-height:1.5em;margin:0 0 .5em;text-align:left}.tooltip-content>p:last-child{margin-bottom:0}.footer.container-tight{padding:30px 0}.footer h3{font-size:1.1em;margin:0 0 .3em}.message-container{background-color:#44a5f2;border-radius:3px;box-sizing:border-box;color:#fff;left:50%;line-height:28px;margin:0 0 0 -300px;opacity:0;padding:6px 12px 5px 2.9em;position:absolute;text-indent:-1.9em;top:385px;-webkit-transition:visibility 251ms linear,opacity 250ms ease;-moz-transition:visibility 251ms linear,opacity 250ms ease;transition:visibility 251ms linear,opacity 250ms ease;visibility:hidden;width:600px;z-index:20}.message-container-warning{background-color:#ff473e}.message-icon{display:none;font-size:1em;margin-right:.5em}.message-container-warning .message-icon{display:inline}.message-visible{opacity:1;visibility:visible;-webkit-transition:visibility 0s linear,opacity 250ms ease;-moz-transition:visibility 0s linear,opacity 250ms ease;transition:visibility 0s linear,opacity 250ms ease}.message-fixed{-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;border-top:none;position:fixed;top:0}.message-close{direction:ltr;position:absolute;right:10px;height:14px;margin:2px 0 0;opacity:.5;text-decoration:none;text-indent:-2000px;width:14px}.message-error{background:url(../images/icon-alerts-red.png) 15px 8px no-repeat #f46f2a;color:#fff;border:none}.lightbox-shield{background-color:rgba(0,0,0,.5);bottom:0;display:none;left:0;overflow-y:auto;position:fixed;right:0;top:0;opacity:0;transition:opacity 100ms;z-index:200001}.lightbox-open{opacity:1;transition:opacity 250ms}.lightbox-content{background-color:#fff;box-sizing:border-box;margin:40px auto;max-width:95%;max-width:calc(100% - 16px);position:relative;width:720px}.lightbox-close{color:#b0b0b0;cursor:pointer;font-size:25px;height:23px;position:absolute;right:20px;top:16px;-webkit-transition:all 100ms linear;-moz-transition:all 100ms linear;transition:all 100ms linear;width:23px}.templates{display:none} .input-row-error label.suggestion {display:none !important;} label.suggestion a {color:#979aa1;} label.suggestion a:hover {color:#535660;} textarea {font-family:monospace;width:87%;padding:0.5em 1em;background-color:#e3e4e7;border-top:0;border-right:0;border-bottom:2px solid #c8cacf;border-left:0;overflow:auto;margin-bottom:-7px;} @media (-webkit-min-device-pixel-ratio:2),(min-resolution:168dpi){.button-base{font-weight:700}.loading-spinner-small{background:url(/_img/animation-loading.gif) no-repeat;background-size:16px auto}.loading-spinner-small-sprite{background:url(/_img/sprite-loading.png) no-repeat;background-size:16px auto}} @media (min-width:976px){ .visible-phone,.visible-tablet{display:none!important}.visible-desktop{display:inherit!important}.hidden-desktop{display:none!important} } @media (max-width:975px){ .input-container{padding:0 6em;} .signup-block{padding:2em 1em !important;} .noscroll{overflow:hidden;position:fixed}h1{font-size:36px}h3{margin:0 0 .5em}.menu-item{font-size:.95em;padding:0}.message-container{left:0;margin:0;right:0;top:280px;width:auto}.message-fixed{top:0}.hidden-tablet,.visible-phone{display:none!important}.visible-tablet{display:inherit!important}.visible-desktop{display:none!important} } @media (min-width:740px){ .masthead-page-block {padding:0 !important;} } @media (max-width:740px){ .text-tagline{position:inherit;right:0}h3{font-size:1.7em;line-height:1.3em}.text-group{white-space:normal}.button-base{display:block;padding:1em 0}.button-small{padding:1em .8em}.button-social{margin-bottom:1em;line-height:1}input.button-base{width:100%} .input-container{border-left:none;padding-left:0;padding-right:0;float:none}.input-text{margin-bottom:.5em;width:100%}.input-submit{margin-top:1em}.input-subinfo{margin-left:0;width:auto}a.input-link{position:static;margin-top:1em;display:block}.input-row{padding-bottom:1em}.input-row-error .input-select-wrapper+label,.input-row-error input+label,#target_lang-error{top:105px}.input-select-wrapper.width-1-2+.input-select-wrapper.width-1-2{margin-top:1em}.input-select-wrapper.width-1-2,.input-text.width-1-2{width:100%}.input.width-1-2+.input.width-1-2{margin-top:.5em}.input-row,.input-row .width-1-2{width:100%}.input-row-spacy{margin:0 0 1em}.label-left{line-height:2.2em;width:100%}.label-right+.input-radio{margin-left:0} .container-inner{padding:0 10px}a.menu-toggle{border:1px solid #666;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;color:#666;font-family:pingdom-iconsregular;height:30px;line-height:32px;position:absolute;right:0;text-align:center;top:23px;width:30px;-webkit-font-smoothing:none}a.menu-toggle-active{border-color:#fff;color:#fff}.menu-list{background:#000;left:-20px;margin-top:0;position:absolute;right:-20px;top:80px;overflow:hidden;height:0;-webkit-transition:height 250ms ease;-moz-transition:height 250ms ease;transition:height 250ms ease}.menu-item{display:list-item}.menu-item:last-child{margin-bottom:15px}.menu-link{display:block;padding:20px} .input-container-fixed,.input-container-fixed-bottom{padding-top:3em}.input-checkbox-wrapper,.input-radio-wrapper{clear:both}.input-radio-unit{margin:0;width:49%}.icon-customers{font-size:2em}.message-container{top:310px;padding-bottom:12px}.message-fixed{top:0}.hidden-phone{display:none!important}.visible-phone{display:inherit!important}.visible-phone.discount{margin-top:10px}.visible-desktop,.visible-tablet{display:none!important} textarea{margin-bottom:.5em;margin:0} .signup-original-language-select{width:80%} } /* signup */ .signup-dont-worry{font-size:1.4em;font-weight:600;line-height:1.3em;margin-top:10px}#package-info-price-monthly{margin-bottom: .5em}.input-container-accountinfo .input-row, .input-container-contactinfo .input-row{margin-bottom: .1em}.signup-coupon-row{text-align:right}#signup-coupon{margin-right:5px}.signup-coupon-error{left:24.8%;top:-2.8em;width:35.6%}#signup-coupon-show{border-bottom:1px solid #c5c5c5;font-size: .9em;font-weight:700;position:absolute;right:6px;top:32px}#signup-coupon-row,#signup-table-vat-row{display:none}.signup-table{display:inline-table;position:relative;width:100%}.signup-table:after{background-color:#e3e4e7;content:'';height:2px;left:14px;position:absolute;right:12px;top:46px}.signup-table-loading{opacity: .6;filter:alpha(opacity=60);-ms-filter:"alpha(Opacity=60)"}.signup-table-header{background-color:#f9f9fa;font-size: .9em;padding:1.1em;text-align:left;text-transform:uppercase}.signup-table td{color:#66696f;font-size: .9em;padding:1em}.signup-table-row{background-color:#f9f9fa}.signup-table-row:first-of-type{border:none}.signup-table-total{background-color:#e3e4e7}.signup-table-total>td{color:#212227;font-size:1em;font-weight:700;padding:1.2em 1em}.signup-table-number{text-align:right}.signup-plan-select{width:100%}.package-info-price-old{color:#ff4c4c;position:relative}.package-info-price-old:after{border-bottom:2px solid #ff4c4c;content:'';left:0;position:absolute;right:0;top:50%;transform:rotate(-10deg)}.package-info-price-discounted{margin-left: .5em}.signup-table .package-info-price-discounted{display:block}.package-info-price-discounted,.package-price{color:#000}#label-signup-terms{margin:0}#label-signup-terms>a{text-decoration:underline}.creditcard{height:24px;position:relative;top:6px}.creditcard-amex{margin-right: .33em}#signup-paywith-container{position:absolute;visibility:hidden}.signup-checkbox-wrapper{margin:-1em 0 1em 0;float:left;width:100%}.signup-checkbox-wrapper .input-checkbox-wrapperlabel{width:1em;height:1em}.signup-checkbox-wrapper .input-checkbox-wrapper{margin:-1px .5em 0 0} @media (min-width: 976px){.input-section-row{float:left;margin-right:3em}.input-section-row:last-child{margin-right:0}} @media (max-width: 975px){.input-container:last-child{margin-bottom:1em}} @media (max-width: 740px){h3{margin-bottom: .2em}.signup-dont-worry{font-size:1em}.input-container{margin-top:2em}.input-select-wrapper.width-1-2{margin-right:0;width:100%}.input.width-1-2+.input.width-1-2{margin-top: .5em;width:100%}.label-left{line-height:2em}.input-row{margin-bottom: .5em}.button-base,.button-container{width:100%}.signup-coupon-row label{display:none}.signup-container-top{padding-bottom:60px}#package-info-price-monthly{margin-bottom:0}#label-signup-terms{line-height:1.5em;margin-left: .4em}.signup-coupon-error{left:0;top:-.6em;width:100%}#signup-coupon-show{display:inline-block;margin-bottom:1em;position:static}#package-info-price-yearly{max-width:85%}.signup-table-row td:nth-child(2), .signup-table-row td:nth-child(3), .signup-table-row th:nth-child(2), .signup-table-row th:nth-child(3){display:none}.input-container:last-child{float:none;margin-top:2em}} .ui-sortable .select2-selection__choice {cursor:move!important;text-transform:capitalize} #opt_source_domain .input-text {width:62%} /* loading border animation */ @keyframes border-bottom-loading { 0% {right:auto;left:0;width:0%} 50% {width:100%} 75% {width:0%} 100% {right:0;left:auto;width:0%} } span.loading-wrapper {display:inline-block;width:62%;position:relative;} span.loading-wrapper input.input-text {width:100%!important} span.border-loading .input-text {border-bottom:2px solid #e3e4e7;} span.border-loading::after {animation-fill-mode:forwards;animation-iteration-count:infinite;animation-timing-function:linear;background:#c8cacf;content:"";position:absolute;height:2px;width:0%;bottom:0;left:0;animation-name:border-bottom-loading;animation-duration:1200ms;} </style> </head> <body class="home home-show"> <header class="main-header"> <nav class="main-navigation-block"> <div> <a class="logo-container" href="/"><img class="gtranslate-logo" src="/assets/images/gt_logo-white-yellow.svg" alt="G|translate" width="160" height="36"></a> </div> </nav> </header> <div class="masthead-page-block"> <div class="container"> <div class="masthead-title"> <h1>Language Selector Widget</h1> </div> </div> </div> <main class="content-area"> <div class="signup-block"> <div class="container"> <div class="input-container input-container-contactinfo"> <div class="input-row"> <label for="widget_look" class="label-left">Widget Look</label> <select id="widget_look" class="signup-original-language-select input-select"> <option value="float" selected>Float</option> <option value="dropdown_with_flags">Nice dropdown with flags</option> <option value="flags_dropdown">Flags and dropdown</option> <option value="dropdown">Dropdown</option> <option value="flags">Flags</option> <option value="flags_name">Flags with language name</option> <option value="flags_code">Flags with language code</option> <option value="lang_names">Language names</option> <option value="lang_codes">Language codes</option> <option value="globe">Globe</option> <option value="popup">Popup</option> </select> <span class="tooltip-container"> <span class="tooltip-anchor" rel="tooltip" title="Multiple language selector styles to choose from.">?</span> </span> </div> <div class="input-row"> <label for="source_lang" class="label-left">Translate From</label> <select id="source_lang" class="signup-original-language-select input-select"> <option value="en" class="notranslate">English</option><option value="ar" class="notranslate">Arabic</option><option value="bg" class="notranslate">Bulgarian</option><option value="zh-CN" class="notranslate">Chinese (Simplified)</option><option value="zh-TW" class="notranslate">Chinese (Traditional)</option><option value="hr" class="notranslate">Croatian</option><option value="cs" class="notranslate">Czech</option><option value="da" class="notranslate">Danish</option><option value="nl" class="notranslate">Dutch</option><option value="fi" class="notranslate">Finnish</option><option value="fr" class="notranslate">French</option><option value="de" class="notranslate">German</option><option value="el" class="notranslate">Greek</option><option value="hi" class="notranslate">Hindi</option><option value="it" class="notranslate">Italian</option><option value="ja" class="notranslate">Japanese</option><option value="ko" class="notranslate">Korean</option><option value="no" class="notranslate">Norwegian</option><option value="pl" class="notranslate">Polish</option><option value="pt" class="notranslate">Portuguese</option><option value="ro" class="notranslate">Romanian</option><option value="ru" class="notranslate">Russian</option><option value="es" class="notranslate">Spanish</option><option value="sv" class="notranslate">Swedish</option><option value="ca" class="notranslate">Catalan</option><option value="tl" class="notranslate">Filipino</option><option value="iw" class="notranslate">Hebrew</option><option value="id" class="notranslate">Indonesian</option><option value="lv" class="notranslate">Latvian</option><option value="lt" class="notranslate">Lithuanian</option><option value="sr" class="notranslate">Serbian</option><option value="sk" class="notranslate">Slovak</option><option value="sl" class="notranslate">Slovenian</option><option value="uk" class="notranslate">Ukrainian</option><option value="vi" class="notranslate">Vietnamese</option><option value="sq" class="notranslate">Albanian</option><option value="et" class="notranslate">Estonian</option><option value="gl" class="notranslate">Galician</option><option value="hu" class="notranslate">Hungarian</option><option value="mt" class="notranslate">Maltese</option><option value="th" class="notranslate">Thai</option><option value="tr" class="notranslate">Turkish</option><option value="fa" class="notranslate">Persian</option><option value="af" class="notranslate">Afrikaans</option><option value="ms" class="notranslate">Malay</option><option value="sw" class="notranslate">Swahili</option><option value="ga" class="notranslate">Irish</option><option value="cy" class="notranslate">Welsh</option><option value="be" class="notranslate">Belarusian</option><option value="is" class="notranslate">Icelandic</option><option value="mk" class="notranslate">Macedonian</option><option value="yi" class="notranslate">Yiddish</option><option value="hy" class="notranslate">Armenian</option><option value="az" class="notranslate">Azerbaijani</option><option value="eu" class="notranslate">Basque</option><option value="ka" class="notranslate">Georgian</option><option value="ht" class="notranslate">Haitian Creole</option><option value="ur" class="notranslate">Urdu</option><option value="bn" class="notranslate">Bengali</option><option value="bs" class="notranslate">Bosnian</option><option value="ceb" class="notranslate">Cebuano</option><option value="eo" class="notranslate">Esperanto</option><option value="gu" class="notranslate">Gujarati</option><option value="ha" class="notranslate">Hausa</option><option value="hmn" class="notranslate">Hmong</option><option value="ig" class="notranslate">Igbo</option><option value="jw" class="notranslate">Javanese</option><option value="kn" class="notranslate">Kannada</option><option value="km" class="notranslate">Khmer</option><option value="lo" class="notranslate">Lao</option><option value="la" class="notranslate">Latin</option><option value="mi" class="notranslate">Maori</option><option value="mr" class="notranslate">Marathi</option><option value="mn" class="notranslate">Mongolian</option><option value="ne" class="notranslate">Nepali</option><option value="pa" class="notranslate">Punjabi</option><option value="so" class="notranslate">Somali</option><option value="ta" class="notranslate">Tamil</option><option value="te" class="notranslate">Telugu</option><option value="yo" class="notranslate">Yoruba</option><option value="zu" class="notranslate">Zulu</option><option value="my" class="notranslate">Myanmar (Burmese)</option><option value="ny" class="notranslate">Chichewa</option><option value="kk" class="notranslate">Kazakh</option><option value="mg" class="notranslate">Malagasy</option><option value="ml" class="notranslate">Malayalam</option><option value="si" class="notranslate">Sinhala</option><option value="st" class="notranslate">Sesotho</option><option value="su" class="notranslate">Sudanese</option><option value="tg" class="notranslate">Tajik</option><option value="uz" class="notranslate">Uzbek</option><option value="am" class="notranslate">Amharic</option><option value="co" class="notranslate">Corsican</option><option value="haw" class="notranslate">Hawaiian</option><option value="ku" class="notranslate">Kurdish (Kurmanji)</option><option value="ky" class="notranslate">Kyrgyz</option><option value="lb" class="notranslate">Luxembourgish</option><option value="ps" class="notranslate">Pashto</option><option value="sm" class="notranslate">Samoan</option><option value="gd" class="notranslate">Scottish Gaelic</option><option value="sn" class="notranslate">Shona</option><option value="sd" class="notranslate">Sindhi</option><option value="fy" class="notranslate">Frisian</option><option value="xh" class="notranslate">Xhosa</option> </select> <span class="tooltip-container"> <span class="tooltip-anchor" rel="tooltip" title="The original language is the language in which your website is written.">?</span> </span> </div> <div class="input-row"> <label for="target_lang" class="label-left">Translate To</label> <select id="target_lang" class="signup-original-language-select valid" name="target_lang[]" multiple="multiple"> <option value="all">All Languages</option> <option value="en" class="notranslate" disabled>English</option><option value="ar" class="notranslate">Arabic</option><option value="bg" class="notranslate">Bulgarian</option><option value="zh-CN" class="notranslate">Chinese (Simplified)</option><option value="zh-TW" class="notranslate">Chinese (Traditional)</option><option value="hr" class="notranslate">Croatian</option><option value="cs" class="notranslate">Czech</option><option value="da" class="notranslate">Danish</option><option value="nl" class="notranslate">Dutch</option><option value="fi" class="notranslate">Finnish</option><option value="fr" class="notranslate" selected>French</option><option value="de" class="notranslate">German</option><option value="el" class="notranslate">Greek</option><option value="hi" class="notranslate">Hindi</option><option value="it" class="notranslate" selected>Italian</option><option value="ja" class="notranslate">Japanese</option><option value="ko" class="notranslate">Korean</option><option value="no" class="notranslate">Norwegian</option><option value="pl" class="notranslate">Polish</option><option value="pt" class="notranslate">Portuguese</option><option value="ro" class="notranslate">Romanian</option><option value="ru" class="notranslate">Russian</option><option value="es" class="notranslate" selected>Spanish</option><option value="sv" class="notranslate">Swedish</option><option value="ca" class="notranslate">Catalan</option><option value="tl" class="notranslate">Filipino</option><option value="iw" class="notranslate">Hebrew</option><option value="id" class="notranslate">Indonesian</option><option value="lv" class="notranslate">Latvian</option><option value="lt" class="notranslate">Lithuanian</option><option value="sr" class="notranslate">Serbian</option><option value="sk" class="notranslate">Slovak</option><option value="sl" class="notranslate">Slovenian</option><option value="uk" class="notranslate">Ukrainian</option><option value="vi" class="notranslate">Vietnamese</option><option value="sq" class="notranslate">Albanian</option><option value="et" class="notranslate">Estonian</option><option value="gl" class="notranslate">Galician</option><option value="hu" class="notranslate">Hungarian</option><option value="mt" class="notranslate">Maltese</option><option value="th" class="notranslate">Thai</option><option value="tr" class="notranslate">Turkish</option><option value="fa" class="notranslate">Persian</option><option value="af" class="notranslate">Afrikaans</option><option value="ms" class="notranslate">Malay</option><option value="sw" class="notranslate">Swahili</option><option value="ga" class="notranslate">Irish</option><option value="cy" class="notranslate">Welsh</option><option value="be" class="notranslate">Belarusian</option><option value="is" class="notranslate">Icelandic</option><option value="mk" class="notranslate">Macedonian</option><option value="yi" class="notranslate">Yiddish</option><option value="hy" class="notranslate">Armenian</option><option value="az" class="notranslate">Azerbaijani</option><option value="eu" class="notranslate">Basque</option><option value="ka" class="notranslate">Georgian</option><option value="ht" class="notranslate">Haitian Creole</option><option value="ur" class="notranslate">Urdu</option><option value="bn" class="notranslate">Bengali</option><option value="bs" class="notranslate">Bosnian</option><option value="ceb" class="notranslate">Cebuano</option><option value="eo" class="notranslate">Esperanto</option><option value="gu" class="notranslate">Gujarati</option><option value="ha" class="notranslate">Hausa</option><option value="hmn" class="notranslate">Hmong</option><option value="ig" class="notranslate">Igbo</option><option value="jw" class="notranslate">Javanese</option><option value="kn" class="notranslate">Kannada</option><option value="km" class="notranslate">Khmer</option><option value="lo" class="notranslate">Lao</option><option value="la" class="notranslate">Latin</option><option value="mi" class="notranslate">Maori</option><option value="mr" class="notranslate">Marathi</option><option value="mn" class="notranslate">Mongolian</option><option value="ne" class="notranslate">Nepali</option><option value="pa" class="notranslate">Punjabi</option><option value="so" class="notranslate">Somali</option><option value="ta" class="notranslate">Tamil</option><option value="te" class="notranslate">Telugu</option><option value="yo" class="notranslate">Yoruba</option><option value="zu" class="notranslate">Zulu</option><option value="my" class="notranslate">Myanmar (Burmese)</option><option value="ny" class="notranslate">Chichewa</option><option value="kk" class="notranslate">Kazakh</option><option value="mg" class="notranslate">Malagasy</option><option value="ml" class="notranslate">Malayalam</option><option value="si" class="notranslate">Sinhala</option><option value="st" class="notranslate">Sesotho</option><option value="su" class="notranslate">Sudanese</option><option value="tg" class="notranslate">Tajik</option><option value="uz" class="notranslate">Uzbek</option><option value="am" class="notranslate">Amharic</option><option value="co" class="notranslate">Corsican</option><option value="haw" class="notranslate">Hawaiian</option><option value="ku" class="notranslate">Kurdish (Kurmanji)</option><option value="ky" class="notranslate">Kyrgyz</option><option value="lb" class="notranslate">Luxembourgish</option><option value="ps" class="notranslate">Pashto</option><option value="sm" class="notranslate">Samoan</option><option value="gd" class="notranslate">Scottish Gaelic</option><option value="sn" class="notranslate">Shona</option><option value="sd" class="notranslate">Sindhi</option><option value="fy" class="notranslate">Frisian</option><option value="xh" class="notranslate">Xhosa</option> </select> <span class="tooltip-container"> <span class="tooltip-anchor" rel="tooltip" title="The languages list into which your website will be translated.">?</span> </span> </div> <div class="input-row"> <label for="url_structure" class="label-left">URL Structure</label> <select id="url_structure" class="signup-original-language-select input-select"> <option value="none" selected>None (free)</option> <option value="sub_directory">Sub-directory (paid) - example.com/fr</option> <option value="sub_domain">Sub-domain (paid) - fr.example.com</option> </select> <span class="tooltip-container"> <span class="tooltip-anchor" rel="tooltip" title="Translations will be done on the fly on the same page using JavaScript.">?</span> </span> </div> <div class="input-row" id="opt_custom_domains" style="display:none"> <label for="custom_domains" class="label-left">Custom Domains</label> <input id="custom_domains" type="checkbox" class="input-checkbox" value="1"> </div> <div class="input-row" id="opt_source_domain" style="display:none"> <label for="source_domain" class="label-left">Source Domain</label> <span class="loading-wrapper"><input id="source_domain" type="text" class="input input-text" placeholder="example.com"></span> <span class="tooltip-container"> <span class="tooltip-anchor" rel="tooltip" title="Original website domain name.">?</span> </span> </div> <div class="input-row" id="opt_select_language_label" style="display:none"> <label for="select_language_label" class="label-left">Select Language Label</label> <span class="loading-wrapper"><input id="select_language_label" type="text" class="input input-text" placeholder="Select Language"></span> <span class="tooltip-container"> <span class="tooltip-anchor" rel="tooltip" title="Default text inside the dropdown when no language is selected.">?</span> </span> </div> <div class="input-row" id="opt_native_language_names"> <label for="native_language_names" class="label-left">Native Language Names</label> <input id="native_language_names" type="checkbox" class="input-checkbox" value="1"> </div> <div class="input-row" id="opt_detect_browser_language"> <label for="detect_browser_language" class="label-left">Auto switch to browser language</label> <input id="detect_browser_language" type="checkbox" class="input-checkbox" value="1"> </div> <div class="input-row" id="opt_add_new_line" style="display:none"> <label for="add_new_line" class="label-left">Add New Line</label> <input id="add_new_line" type="checkbox" class="input-checkbox" value="1"> </div> <div class="input-row" id="opt_color_scheme" style="display:none"> <label class="label-left">Color Scheme</label> <div class="input-radio-unit"> <input id="color_schemelight" class="input-radio" name="color_scheme" type="radio" value="light" checked> <label for="color_schemelight" class="label-right">Light</label> </div> <div class="input-radio-unit"> <input id="color_schemedark" class="input-radio" name="color_scheme" type="radio" value="dark"> <label for="color_schemedark" class="label-right">Dark</label> </div> </div> <div class="input-row" id="opt_globe_size" style="display:none"> <label class="label-left">Globe Size</label> <div class="input-radio-unit"> <input id="globe_size20" class="input-radio" name="globe_size" type="radio" value="20"> <label id="label-globe_size20" for="globe_size20" class="label-right notranslate">20px</label> </div> <div class="input-radio-unit"> <input id="globe_size40" class="input-radio" name="globe_size" type="radio" value="40"> <label id="label-globe_size40" for="globe_size40" class="label-right notranslate">40px</label> </div> <div class="input-radio-unit"> <input id="globe_size60" class="input-radio" name="globe_size" type="radio" value="60" checked> <label id="label-globe_size60" for="globe_size60" class="label-right notranslate">60px</label> </div> </div> <div class="input-row" id="opt_flag_size" style="display:none"> <label class="label-left">Flag Size</label> <div class="input-radio-unit"> <input id="flag_size16" class="input-radio" name="flag_size" type="radio" value="16"> <label id="label-flag_size16" for="flag_size16" class="label-right notranslate">16px</label> </div> <div class="input-radio-unit"> <input id="flag_size24" class="input-radio" name="flag_size" type="radio" value="24"> <label id="label-flag_size24" for="flag_size24" class="label-right notranslate">24px</label> </div> <div class="input-radio-unit"> <input id="flag_size32" class="input-radio" name="flag_size" type="radio" value="32" checked> <label id="label-flag_size32" for="flag_size32" class="label-right notranslate">32px</label> </div> <div class="input-radio-unit"> <input id="flag_size48" class="input-radio" name="flag_size" type="radio" value="48"> <label id="label-flag_size48" for="flag_size48" class="label-right notranslate">48px</label> </div> </div> <div class="input-row" id="opt_flag_style"> <label class="label-left">Flag Style</label> <div class="input-radio-unit"> <input id="flag_style2d" class="input-radio" name="flag_style" type="radio" value="2d" checked> <label for="flag_style2d" class="label-right notranslate">2D (.svg)</label> </div> <div class="input-radio-unit"> <input id="flag_style3d" class="input-radio" name="flag_style" type="radio" value="3d"> <label for="flag_style3d" class="label-right notranslate">3D (.png)</label> </div> </div> <div class="input-row" id="opt_alternative_flags"> <label class="label-left">Alternative Flags</label> <span style="display:inline-block;vertical-align:middle"> <input id="alt_us" name="alt_flags[]" type="checkbox" class="input-checkbox" data-lang-group="en" value="usa"> <label for="alt_us">USA flag (English)</label><br> <input id="alt_ca" name="alt_flags[]" type="checkbox" class="input-checkbox" data-lang-group="en" value="canada"> <label for="alt_ca">Canada flag (English)</label><br> <input id="alt_br" name="alt_flags[]" type="checkbox" class="input-checkbox" data-lang-group="pt" value="brazil"> <label for="alt_br">Brazil flag (Portuguese)</label><br> <input id="alt_mx" name="alt_flags[]" type="checkbox" class="input-checkbox" data-lang-group="es" value="mexico"> <label for="alt_mx">Mexico flag (Spanish)</label><br> <input id="alt_ar" name="alt_flags[]" type="checkbox" class="input-checkbox" data-lang-group="es" value="argentina"> <label for="alt_ar">Argentina flag (Spanish)</label><br> <input id="alt_co" name="alt_flags[]" type="checkbox" class="input-checkbox" data-lang-group="es" value="colombia"> <label for="alt_co">Colombia flag (Spanish)</label><br> <input id="alt_qc" name="alt_flags[]" type="checkbox" class="input-checkbox" data-lang-group="fr" value="quebec"> <label for="alt_qc">Quebec flag (French)</label> </span> </div> <div class="input-row" id="opt_float_position"> <label for="float_position" class="label-left">Position</label> <select id="float_position" class="notranslate input-select"> <option value="bottom-left" selected>Bottom Left</option> <option value="bottom-right">Bottom Right</option> <option value="top-left">Top Left</option> <option value="top-right">Top Right</option> <option value="inline">Inline</option> </select> </div> <div class="input-row" id="opt_position" style="display:none"> <label for="position" class="label-left">Position</label> <select id="position" class="notranslate input-select"> <option value="inline" selected>Inline</option> <option value="bottom-left">Bottom Left</option> <option value="bottom-right">Bottom Right</option> <option value="top-left">Top Left</option> <option value="top-right">Top Right</option> </select> </div> <div class="input-row" id="opt_float_switcher_open_direction"> <label for="float_switcher_open_direction" class="label-left">Open Direction</label> <select id="float_switcher_open_direction" class="notranslate input-select"> <option value="left">Left</option> <option value="right">Right</option> <option value="top" selected>Up</option> <option value="bottom">Down</option> </select> </div> <div class="input-row" id="opt_switcher_open_direction"> <label class="label-left">Open Direction</label> <div class="input-radio-unit"> <input id="switcher_open_directiontop" class="input-radio" name="switcher_open_direction" type="radio" value="top"> <label for="switcher_open_directiontop" class="label-right notranslate">Up</label> </div> <div class="input-radio-unit"> <input id="switcher_open_directionbottom" class="input-radio" name="switcher_open_direction" type="radio" value="bottom" checked> <label for="switcher_open_directionbottom" class="label-right notranslate">Down</label> </div> </div> <div class="input-row"> <label for="widget_code" class="label-top">Widget Code</label> <textarea id="widget_code" class="notranslate" rows="7" readonly></textarea> <span class="tooltip-container" style="vertical-align:top"> <span class="tooltip-anchor" rel="tooltip" title="Place this code on your website to enable the language selector.">?</span> </span> </div> <div class="input-row"> <label class="label-top">Widget Preview</label> <div id="widget_preview" class="notranslate">...</div> </div> <div class="button-container signup-button-container"> <button id="update-preview-button" class="button green">Update Preview</button> </div> </div> </div> </div> </main> <div class="footer-navigation-block" id="contact"> <div class="container"> <div class="footer-support"> <ul class="footer-support-list"> <li class="support-title">Support</li> <li class="support-number"><a href="#" onclick="Intercom('showNewMessage');return false;" style="color:#fff000;">Live chat</a></li> <li class="support-hours notranslate">2am - 6pm (Mon - Fri)<br>UTC&ndash;4</li> </ul> </div> <div class="footer-nav"> <div class="footer-nav-col"> <ul class="footer-nav-list"> <li><a href="/about-us">About Us</a></li> <li><a href="/blog">Blog</a></li> <li><a href="https://docs.gtranslate.io">Documentation</a></li> <li><a href="https://gtranslate.io/forum" class="nturl">Forum</a></li> <li><a href="/videos">Videos</a></li> </ul> </div> <div class="footer-nav-col"> <ul class="footer-nav-list"> <li><a href="/supported-languages">Supported Languages</a></li> <li><a href="/website-translator-widget">Website Translator Widget</a></li> <li><a href="/website-translation-quote">Website Translation Quote</a></li> </ul> </div> <div class="footer-nav-col"> <ul class="footer-nav-list"> <li><a href="mailto:info@gtranslate.net" class="nturl" id="intercom_form">Contact Us</a></li> <li><a href="/terms">Terms of Service</a></li> <li><a href="/privacy-policy">Privacy Policy</a></li> <li><a href="/returns-policy">Returns Policy</a></li> <li><a href="/sitemap">Sitemap</a></li> </ul> </div> </div> </div> </div> <div class="footer-copyright-block"> <div class="container"> <div class="copyright-text"> <p class="notranslate">&copy; 2008 - 2024 <a href="https://gtranslate.com/" target="_blank" rel="noopener">GTranslate Inc</a>. All Rights Reserved.</p> </div> </div> </div> <script src="/assets/js/scripts-optimized3.js"></script> <script> window.intercomSettings = {app_id:'r70azrgx',hide_default_launcher:false,custom_launcher_selector:'#intercom_form'}; var icLoader = function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/r70azrgx';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);};if(document.readyState==='complete'){l();}else if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}}; if(window.innerWidth <= 768) { var mobileLoader = function() {icLoader();window.removeEventListener('scroll', mobileLoader);}; window.addEventListener('scroll', mobileLoader); } else icLoader(); </script> <div style="display:none;"> <span id="domain_msg">Please enter a valid domain name.</span> <span id="original_language_msg">Please enter the original language of your website.</span> <span id="translate_to_msg">Please select at least one language for translation.</span> <span id="search_label">Search</span> <span id="no_subscription_msg">No subscription found for source domain. Please subscribe at https://gtranslate.io/</span> <span id="no_settings_msg">Make sure your subscription has Language Hosting feature and Custom domains are configured in your GTranslate dashboard: https://my.gtranslate.io/settings#advanced</span> <span id="strange_err">Something strange happened, please try again later.</span> <span id="none_desc">Translations will be done on the fly on the same page using JavaScript.</span> <span id="sub_directory_desc" class="hidden">Translated pages will have a separate sub-directory URL which can be indexed by search engines.</span> <span id="sub_domain_desc" class="hidden">Translated pages will have a separate sub-domain URL which can be indexed by search engines.</span> </div> <link href="/assets/css/select2.min.css" rel="stylesheet" media="all"> <script src="/assets/js/select2.min.js"></script> <script src="/assets/js/jquery-ui.min.js"></script> <script> var widgets_location = 'https://cdn.gtranslate.net/widgets/latest/'; if(typeof localStorage == 'object' && localStorage.hasOwnProperty('gt_settings')) { var gt_settings = JSON.parse(localStorage.getItem('gt_settings')); // reconstruct interface if(gt_settings.widget_look) $('#widget_look').val(gt_settings.widget_look); if(gt_settings.default_language) $('#source_lang').val(gt_settings.default_language); if(gt_settings.languages) { gt_settings.languages = gt_settings.languages.filter(function(l){return l !== null}); gt_settings.languages.forEach(function(lang){ var el = $('#target_lang').find('option[value="'+lang+'"]'); el.detach(); $('#target_lang').append(el); }); $('#target_lang').val(gt_settings.languages); } else { $('#target_lang').val('all'); } if(gt_settings.url_structure) $('#url_structure').val(gt_settings.url_structure); if(gt_settings.custom_domains) $('#custom_domains').prop('checked', true); if(gt_settings.native_language_names) $('#native_language_names').prop('checked', true); if(gt_settings.detect_browser_language) $('#detect_browser_language').prop('checked', true); if(gt_settings.flag_size) $('#flag_size'+gt_settings.flag_size).prop('checked', true); if(gt_settings.flag_style) $('#flag_style'+gt_settings.flag_style).prop('checked', true); if(gt_settings.globe_size) $('#globe_size'+gt_settings.globe_size).prop('checked', true); if(gt_settings.alt_flags) $('input[name="alt_flags[]"]').each(function(_, el) { var alt_flag = gt_settings.alt_flags[$(el).attr('data-lang-group')]; if(alt_flag && $(el).val() == alt_flag) $(el).prop('checked', true); }); if(gt_settings.switcher_horizontal_position || gt_settings.switcher_vertical_position) $('#float_position').val((gt_settings.switcher_vertical_position||'bottom') + '-' + (gt_settings.switcher_horizontal_position||'left')); if(gt_settings.switcher_horizontal_position == 'inline') $('#float_position').val('inline'); if(gt_settings.horizontal_position && gt_settings.vertical_position) $('#position').val(gt_settings.vertical_position + '-' + gt_settings.horizontal_position); if(!gt_settings.horizontal_position) $('#position').val('inline'); if(gt_settings.float_switcher_open_direction) $('#float_switcher_open_direction').val(gt_settings.float_switcher_open_direction); if(gt_settings.switcher_open_direction) $('#switcher_open_direction'+gt_settings.switcher_open_direction).prop('checked', true); if(gt_settings.add_new_line) $('#add_new_line').prop('checked', true); if(gt_settings.select_language_label) $('#select_language_label').val(gt_settings.select_language_label); if(gt_settings.dropdown_hover_color) $('#color_schemedark').prop('checked', true); } $('#widget_code').on('click', function(){ $(this).select(); }); $('#source_lang,#target_lang').on('select2:selecting', function(){ $(this).data('old-val', $(this).val()); }); $('#target_lang').change(function() { var tl = $('#target_lang'); var old_values = tl.data('old-val')||[]; var values = tl.val(); if(values == null) { values = ['all']; tl.val(values); } if(values.includes('all') && !old_values.includes('all')) { // added 'all', so we remove the rest tl.val(['all']); tl.trigger('change.select2'); } else if(old_values.includes('all')) { // added something new, so removing 'all' and keeping the new tl.val(values.filter(function(el){return el != 'all'})); if(tl.val() == null) tl.val(['all']); tl.trigger('change.select2'); } }); $('#source_lang').change(function() { var idx = $.inArray($(this).val(), $('#target_lang').val()); if(idx != -1) { $('#target_lang').val( $('#target_lang').val().slice(0, idx).concat($('#target_lang').val().slice(idx + 1)).concat($(this).data('old-val')) ).change(); $('#target_lang').trigger('change.select2'); } $('#target_lang option').each(function() { if($(this).val() == $('#source_lang').val()) { $(this).prop('disabled', true).prop('selected', false); $(this).trigger('change'); } else { $(this).prop('disabled', false); } }); $('#target_lang').select2('destroy'); $('#target_lang').select2(); $('#target_lang-error').remove(); }); $('#url_structure').change(function() { if($(this).val() == 'sub_domain') $('#url_structure').parent().parent().find('span.tooltip-anchor').attr('title', $('#sub_domain_desc').text()); else if($(this).val() == 'sub_directory') $('#url_structure').parent().parent().find('span.tooltip-anchor').attr('title', $('#sub_directory_desc').text()); else if($(this).val() == 'none') $('#url_structure').parent().parent().find('span.tooltip-anchor').attr('title', $('#none_desc').text()); }); $('input[name="alt_flags[]"]').change(function() { if($(this).prop('checked')) { var lang_group = $(this).attr('data-lang-group'); // uncheck other items from lang group $('input[name="alt_flags[]"][data-lang-group="'+lang_group+'"]').prop('checked', false); $(this).prop('checked', true); } }); (function($) { $.fn.styleSelect = function() { return this.each(function() { var css, selectEl, wrapperEl, wrapperTextEl; if (selectEl = $(this), selectEl.is("select")) return wrapperEl = selectEl.parent(), wrapperEl.is(".input-select-wrapper") || (css = selectEl.get(0).className, selectEl.wrap('<div class="input-select-wrapper ' + css + '"></div>'), selectEl.after('<span class="input-select-wrappertext"></span>'), wrapperEl = selectEl.parent()), wrapperTextEl = wrapperEl.find(".input-select-wrappertext"), "none" === !selectEl.css("display") && wrapperEl.hide(), selectEl.is(":disabled") && wrapperEl.addClass(".input-select-disabled"), wrapperTextEl.text(selectEl.find("option:selected").text()), selectEl.bind("updateText", function() { return wrapperTextEl.text(selectEl.find("option:selected").text()) }), selectEl.on("change keyup", function(e) { return selectEl.trigger("updateText") }) }) }, $.fn.styleCheckbox = function() { return this.each(function() { var checkboxEl, css; if (checkboxEl = $(this), !checkboxEl.parent().is(".input-checkbox-wrapper")) return css = this.className, checkboxEl.wrap('<div class="input-checkbox-wrapper ' + css + '"></div>'), checkboxEl.after('<label for="' + this.id + '" class="input-checkbox-wrapperlabel"></label>') }) }, $.fn.styleRadio = function() { return this.each(function() { var css, radioEl; if (radioEl = $(this), !radioEl.parent().is(".input-radio-wrapper")) return css = this.className, radioEl.wrap('<div class="input-radio-wrapper ' + css + '"></div>'), radioEl.after('<label for="' + this.id + '" class="input-radio-wrapperlabel"></label>') }) } $(".input-select").styleSelect(); $(".input-checkbox").styleCheckbox(); $(".input-radio").styleRadio(); })(jQuery); function update_widget_code(evt) { if(evt) evt.stopPropagation(); var gt_settings = {}; var widget_look = $('#widget_look').val(), switcher_horizontal_position = $('#float_position').val().split('-').pop(), switcher_vertical_position = $('#float_position').val().split('-').shift(), horizontal_position = $('#position').val().split('-').pop(), vertical_position = $('#position').val().split('-').shift(), float_switcher_open_direction = $('#float_switcher_open_direction').val(), switcher_open_direction = $('input[name="switcher_open_direction"]:checked').val(), default_language = $('#source_lang').val(), native_language_names = $('#native_language_names').prop('checked'), detect_browser_language = $('#detect_browser_language').prop('checked'), add_new_line = $('#add_new_line').prop('checked'), select_language_label = $('#select_language_label').val(), flag_size = parseInt($('input[name="flag_size"]:checked').val()), flag_style = $('input[name="flag_style"]:checked').val(), globe_size = parseInt($('input[name="globe_size"]:checked').val()), color_scheme = $('input[name="color_scheme"]:checked').val(), alt_flags = $('input[name="alt_flags[]"]:checked').get().reduce(function(acc, curr) {acc[$(curr).attr('data-lang-group')] = $(curr).val(); return acc;}, {}), wrapper_selector = '.gtranslate_wrapper', url_structure = $('#url_structure').val(), languages = [default_language].concat($('#target_lang').val()).filter(function(el){return el != 'auto'}); if(languages.includes('all')) languages = []; // skip defaults to keep the code small if(widget_look != 'float') gt_settings.widget_look = widget_look; if(default_language != 'auto') gt_settings.default_language = default_language; if(native_language_names != false) gt_settings.native_language_names = native_language_names; if(detect_browser_language != false) gt_settings.detect_browser_language = detect_browser_language; if(url_structure != 'none') gt_settings.url_structure = url_structure; if(languages.length > 0 ) gt_settings.languages = languages; // add globe color if(widget_look == 'globe') gt_settings.globe_color = '#66aaff'; // add always gt_settings.wrapper_selector = wrapper_selector; // disable loading on hover window.gt_translate_script = true; if(url_structure == 'sub_domain') { $('#opt_custom_domains').show(); if($('#custom_domains').prop('checked')) { $('#opt_source_domain').show(); // validate if(!RegExp("^([a-z0-9][a-z0-9\\-]*(\\.|\\-*\\.))+[a-z0-9\\-]{2,20}$").test($('#source_domain').val())) { $('#source_domain').parent().parent().addClass('input-row-error'); $('#source_domain').addClass('input-error'); } else { $('#source_domain').parent().parent().removeClass('input-row-error') $('#source_domain').removeClass('input-error'); if(window.source_domain != $('#source_domain').val()) { // sync custom domains with dashbaord $('#source_domain').parent().addClass('border-loading'); // cache for later use window.source_domain = $('#source_domain').val(); $.ajax({ url: 'https://tdns.gtranslate.net/tdn-bin/load-custom-domains', type: 'GET', dataType: 'json', async: false, headers: {"X-GT-Domain": $('#source_domain').val()}, success: function(data) { if(data.err) { // todo: nice alert box if(data.err == 'no license') alert($('#no_subscription_msg').text()); else if(data.err == 'no settings') alert($('#no_settings_msg').text()); else alert(data.err); window.custom_domains = {}; return; } gt_settings.custom_domains = data; // cache for later use window.custom_domains = data; }, error: function(e) { alert($('#strange_err').text()); } }); $('#source_domain').parent().removeClass('border-loading'); } else if(window.custom_domains && Object.keys(window.custom_domains).length > 0) { gt_settings.custom_domains = window.custom_domains; } } } else { $('#opt_source_domain').hide(); } } else { $('#opt_custom_domains,#opt_source_domain').hide(); } if(widget_look == 'dropdown' || widget_look == 'lang_names' || widget_look == 'lang_codes' || widget_look == 'float') { $('#opt_flag_size').hide(); } else { if(flag_size != 32) gt_settings.flag_size = flag_size; $('#opt_flag_size').show(); } if(widget_look == 'float' || widget_look == 'dropdown_with_flags') { $('#opt_float_position').show(); $('#opt_position').hide(); if(switcher_horizontal_position == 'inline') { gt_settings.switcher_horizontal_position = switcher_horizontal_position; } else { if(switcher_horizontal_position != 'left') gt_settings.switcher_horizontal_position = switcher_horizontal_position; if(switcher_vertical_position != 'bottom') gt_settings.switcher_vertical_position = switcher_vertical_position; } if(widget_look == 'float') { if(float_switcher_open_direction != 'top') gt_settings.float_switcher_open_direction = float_switcher_open_direction; $('#opt_switcher_open_direction').hide(); $('#opt_float_switcher_open_direction').show(); } else { if(switcher_open_direction != 'bottom') gt_settings.switcher_open_direction = switcher_open_direction; $('#opt_switcher_open_direction').show(); $('#opt_float_switcher_open_direction').hide(); } } else { $('#opt_float_position,#opt_float_switcher_open_direction,#opt_switcher_open_direction').hide(); $('#opt_position').show(); if(horizontal_position != 'inline') { gt_settings.horizontal_position = horizontal_position; gt_settings.vertical_position = vertical_position; } } if(widget_look == 'dropdown' || widget_look == 'lang_names' || widget_look == 'lang_codes') { $('#opt_flag_style,#opt_alternative_flags').hide(); } else { if(flag_style != '2d' && widget_look != 'globe') gt_settings.flag_style = flag_style; if(Object.keys(alt_flags).length > 0) gt_settings.alt_flags = alt_flags; $('#opt_flag_style,#opt_alternative_flags').show(); } if(widget_look == 'globe') { $('#opt_flag_style').hide(); $('#opt_globe_size').show(); if(globe_size != 60) gt_settings.globe_size = globe_size; } else { $('#opt_globe_size').hide(); } if(widget_look == 'flags_dropdown') { if(add_new_line != false) gt_settings.add_new_line = add_new_line; $('#opt_add_new_line').show(); } else { $('#opt_add_new_line').hide(); } if(widget_look == 'dropdown' || widget_look == 'flags_dropdown') { if(select_language_label != '') gt_settings.select_language_label = select_language_label; $('#opt_select_language_label').show(); } else { $('#opt_select_language_label').hide(); } if(widget_look == 'dropdown_with_flags') { if(color_scheme == 'dark') { gt_settings.switcher_text_color = '#f7f7f7'; gt_settings.switcher_arrow_color = '#f2f2f2'; gt_settings.switcher_border_color = '#161616'; gt_settings.switcher_background_color = '#303030'; gt_settings.switcher_background_shadow_color = '#474747'; gt_settings.switcher_background_hover_color = '#3a3a3a'; gt_settings.dropdown_text_color = '#eaeaea'; gt_settings.dropdown_hover_color = '#748393'; gt_settings.dropdown_background_color = '#474747'; } $('#opt_color_scheme').show(); } else { $('#opt_color_scheme').hide(); } if(typeof localStorage == 'object') localStorage.setItem('gt_settings', JSON.stringify(gt_settings)); delete gt_settings.widget_look; var init_widget_code = '<div class="gtranslate_wrapper"></div>' + "\r\n"; init_widget_code += '<script>window.gtranslateSettings = ' + JSON.stringify(gt_settings) + '<\/script>' + "\r\n"; var widget_short_name = widget_look.split('_').map(function(el){return el.charAt(0)}).join(''); if(widget_short_name.length == 1) widget_short_name = widget_look; init_widget_code += '<script src="'+widgets_location+widget_short_name+'.js" defer><\/script>'; $('html').attr('lang', gt_settings.default_language); $('#widget_code').val(init_widget_code); } function update_preview() { $('#widget_preview').html(''); $('style.gtranslate_css').remove(); $('#widget_preview').html($('#widget_code').val().replace('detect_browser_language', 'disable_detect_browser_language')); // todo: avoid timeout setTimeout(function(){ $('a[data-gt-lang]').attr('onclick', 'return false;'); $('select.gt_selector option').removeAttr('data-gt-href'); }, 1000); } jQuery(document).ready(function($) { $('#target_lang').select2({ templateSelection: function(data, container) { container[0].setAttribute('data-select-lang', data.id); return data.text; } }); $('#source_lang').change(); $('#target_lang').change(); $(window).on('resize', function() { $('#target_lang').select2('destroy').select2(); $('#target_lang-error').remove(); // todo: sortable }); $('#target_lang').on('select2:select', function(evt) { var el = $(evt.params.data.element); el.detach(); $(this).append(el); $(this).trigger('change'); }); $('.select2-selection__rendered').sortable({ update: function(evt, ui) { var lang_order = $('#target_lang+span.select2-container li.select2-selection__choice').toArray().map(el => el.getAttribute('data-select-lang')); // move to top lang_order.reverse().forEach(function(lang) { var el = $('#target_lang option[value="'+lang+'"]'); el.detach(); $('#target_lang').prepend(el); }); update_widget_code(); } }); $('input.select2-search__field').attr('aria-label', $('#search_label').text()); update_widget_code(); update_preview(); $('#update-preview-button').on('click', update_preview); $('.input-select,.input-radio,.input-checkbox,.input-text,#target_lang').on('change', update_widget_code); }); </script> </body> </html>

Pages： 1 2 3 4 5 6 7 8 9 10