Adding A Translate Button To Your SiteWide Template

Updated on 20-October-2016 at 10:16 AM

Business Catalyst End of life announcement - find out more details.

Introduction

Adding a "Translate" button to your website is a great way to cater to the global online audience.

Using the handy TranslateThis service, you can add a button to your site-wide template in just seconds - enabling visitors to translate your pages into over 50 different languages.

Note: In this article, we'll be adding the button to our site-wide template, however if you'd like to limit the pages the button is rendered on, you can simply include the code in the desired module layout (eg. your Blog Post Details layout).

 

Step 1 - Select Template

Navigate to Site Manager  > Page Templates  and select the template you'd like to add the translate button to. For this example, we'll just choose our default "Main Template".

 

Step 2 - Insert HTML / Javascript

Switch over to the HTML mode of the online editor and insert the following code where you'd like the button rendered:

<span><!-- Begin TranslateThis Button -->  
  
<div id="translate-this"><a href="</span><a class="jive-link-external-small" href="http://translateth.is/" rel="nofollow">http://translateth.is/</a><span>" class="translate-this-button">Translate</a></div>  
  
<script type="text/javascript" src="</span><a class="jive-link-external-small" href="http://www.google.com/jsapi" rel="nofollow">http://www.google.com/jsapi</a><span>"></script>  
<script type="text/javascript" src="</span><a class="jive-link-external-small" href="http://x.translateth.is/translate-this.js" rel="nofollow">http://x.translateth.is/translate-this.js</a><span>"></script>  
<script type="text/javascript">  
TranslateThis();  
</script>  
  
<!-- End TranslateThis Button -->  
  
</span>  

Step 3 - Save and Publish

Click "Save " to save your changes.

Switching over to the front end of your site, you should now see the "Translate" button rendered on all of your pages that use the template we just edited.

translate-button.PNG

Naturally, you can customize the look and feel of the button using CSS / JavaScript. For more details on advanced customization options, refer to the TranslateThis documentation page at: http://translateth.is/docs