HubSpot

The following step by step tutorial will help you configure your HubSpot Application with Translation Exchange service and allow you to translate your site to any number of languages.

If you haven't yet setup your project on Translation Exchange, please sign up here and follow the project setup instructions.

Step 1: Go to your HubSpot Dashboard, on the right side under "content" please click on "Site Pages":

Step 2: On "Site Pages" you will see three default sites, "Contact Us","About Us", and "Home". To localize those pages please click on one of the pages to go inside Site design:

Step 3: Inside one of "Site Pages", on the left side under "Site Page Actions" click on "Edit":

Step 4: Inside Site Page edit Content click on "Options":

Step 5: Bellow you find TranslationExchange Code Snippet you want to add to "Head Section HTML":

<script src="https://cdn.translationexchange.com/tools/tml/stable/tml.min.js"></script>

<script>  
tml.init({  
  key: "YOUR-PROJECT-KEY",
  translateBody: true,
  translateTitle: true
});
</script>  

IMPORTANT! Make sure to replace "YOUR-PUBLIC-KEY" and "YOUR-PROJECT-KEY" with your project credentials. Click "Save" and "Preview". If you do not have your token, you can get it from your Dashboard.

Translation Exchange provides a default language selector for changing languages. Add the following "div" tag where you would like the language selector to appear.

<div data-tml-language-selector="popup" data-tml-toggle=true data-tml-powered-by=true></div>  

Once you complete the above steps, please refresh your page. To activate the inline translation mode, use the following shortcut: CTRL+Shift+I

When you active the inline translation mode, your application content will be synchronized with Translation Exchange and your strings will appear in your Dashboard.

Integration with HubSpot Application is now complete. Please follow our simple tutorial on how to order and publish translations for your site.