Integration Guides Custom Integration
Custom SiteTran Integration
Custom SiteTran Integration
Last updated: 3 months ago
3 minute read
David Peterman
Developer at SiteTran

ALL ARTICLES

Overview of Custom Site SiteTran Integration

This guide offers a straightforward, step-by-step approach to make your custom website multilingual in just a few minutes. Anyone can follow along successfully, no technical background needed.

Expanding your online business's reach to a global audience has never been easier for custom site users thanks to SiteTran. Whether you're looking to attract new customers from different backgrounds or enhance the user experience for your current international clientele, this guide will walk you through the entire process.

Let's dive into the world of website translation and unlock new possibilities for your site, with SiteTran!

Prerequisites:

Your custom-built website that you want to translate.

A SiteTran account that you will integrate with your site. If you haven’t already, sign up for SiteTran, and add a new site.

Time needed:

Estimated time needed: 3 minutes.

Let’s get started.

Get your Widget Code

First, retrieve your widget code from SiteTran. If you haven’t already signed up for SiteTran, it only takes 30 seconds. After creating your account, create a site in SiteTran, and then proceed to get your widget code, which is what generates the language dropdown on your site.

In SiteTran go to the "Widget" page.

To get your site’s SiteTran Widget Code, go to your site’s "Widget" page from the menu on top.

Screen to find your SiteTran Widget Code

Copy the Widget Code

Click the "Copy" button to copy your widget code (includes your styles). You will use this in a bit.

Button to copy out your SiteTran Widget Code

Integrating with a Custom Site

Access Your HTML Files

Open the HTML file for the page where you want the SiteTran Widget to appear. This can be done using any text editor or HTML editor.

Insert the Widget Code

Paste the SiteTran Widget Code into the HTML file. Place it at the bottom of the <body> section of your HTML file, where you want the language dropdown to appear. For example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Site Title</title>
</head>
<body>
    <!-- Other content of your site -->

    <!-- SiteTran Widget Code -->
    <script>var sitetran = {site_id: 0000};</script>
    <script src="/js/sitetran-widget.js"></script>
    <div id="sitetran_translate_element"></div>

</body>
</html>

Save and Upload

Save the changes to your HTML file and upload the updated file to your web server.

Verifying & Translating

Visit your custom site, and locate the SiteTran Widget. Choose your new language from the dropdown, and SiteTran will begin discovering your phrases.

Congratulations! You have successfully integrated SiteTran with your custom site.

Couldn't find what you were looking for?

In this article

Website Translation Made Easy