The Additional Language feature allows your widget to display in multiple languages based on user selection. This ensures a smooth, localized experience as the widget automatically adjusts to the chosen language.
💡 Tip We recommend you reviewing the Widget Settings and Display Items in Widgets guide before proceeding with this article. |
Setting Up Your Widget for Multiple Languages
You can configure your widget to support various languages—such as Dutch, English, French, and more. When a user selects a language on your website, the widget will automatically switch to their chosen language. Follow these steps to set it up:
Navigate to the Widget Settings page in your dashboard.
Click the Widget Settings section.
In the Widget Settings subsection, click the dropdown under Main Language and select your primary widget language.
In the Additional Language Codes subsection, select the secondary language you want to display.
Use the preview panel on the left to see how your widget looks in the additional language.
Copy the generated widget code and paste it as close to the opening
<head>tag as possible on every page where you want the buyback widget to appear.
Here's the example Widget Code with language parameter:
<script src="https://widget.reusely.com/v3.js"></script>
<div class="buyback-widget"></div>
<script defer>
new Buyback({
tenantId: "05ca56f831d03c760ecf2e32b47be020ea25fc145ff5203d00d67ce51dc0837a",
apiKey: "MSCjL634WHd0So4dRG3EBTaLPUROgGbkaHQu3lulENgeWazRHS1wiT5yc7gb9Yc0",
language: language 1/language 2/language 3,
disableFloatButton: false
})
</script>Once installed, the widget will automatically switch languages when users select their preference. For example, if the URL ends with
/fr, the widget will display in French.
Adding a Multi-Language Selector
To allow users to switch languages, you can implement a language selector on your website. Here is a sample code snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="languageForm" onsubmit="submitLang(event)">
<select id="languageSelect" value="en">
<option value="en">English</option>
<option value="de">German</option>
<option value="fr">French</option>
</select>
<button type="submit">Submit</button>
</form>
<script src="https://widget.reusely.com/v3.js"></script>
<div class="buyback-widget"></div>
<script defer>
var langSelected = 'en'; // Default language
new Buyback({
tenantId: "d0d41f3229a032440d4808447c75b43b8009281fb2a63573578f7cf8b141fdef",
apiKey: "ppoMMcpHpeINElO52hgNVWLQ8laKKDvQwwUn8BVI6XXovK1SvU3AlfwWbJ5rwsyY",
disableFloatButton: false
})
// Function to handle language selection and prevent form submission
function submitLang(event) {
event.preventDefault(); // Prevent form from submitting
// Get the selected language from the dropdown
langSelected = document.getElementById('languageSelect').value;
// Reinitialize the Buyback widget with the new language
Buyback.update({
tenantId: "d0d41f3229a032440d4808447c75b43b8009281fb2a63573578f7cf8b141fdef",
apiKey: "ppoMMcpHpeINElO52hgNVWLQ8laKKDvQwwUn8BVI6XXovK1SvU3AlfwWbJ5rwsyY",
...(langSelected && langSelected != 'en' && {language: langSelected}),
disableFloatButton: false
});
}
</script>
</body>
</html>
Here is an example of how the code snippet is implemented on the W3Schools website.
Important Notes
While you can generate multiple language codes (e.g., Spanish, German), the widget can only display two languages at a time—one primary and one secondary.
The secondary language preview resets when the page is refreshed and is not stored in the database.
You can embed the secondary language widget code in a separate HTML container. For example, if you generate a widget code for French, you can display it in a dedicated section for French-speaking users.
With the Additional Language feature, you can offer a personalized experience, allowing your customers to interact with your platform in their preferred language.