Introduction Version 2.8 / Dernière mise à jour : 22 juin 2026

Bienvenue dans le manuel de Conword.

Sur cette page, vous trouverez les réponses aux questions les plus courantes ainsi que tout ce dont vous avez besoin pour installer et configurer Conword sur ou sur le site web de votre client.

Langues disponibles

La liste des langues actuellement disponibles et leurs codes de langue (« en », « fr », « de », …) est disponible ici : https://conword.io/sprachen/

Conditions préalables

Le frontend de conword est écrit en javascript, il ne s'appuie donc sur aucun framework. Bien qu'il ne dépende pas de code tiers, il fonctionne bien avec jquery et d'autres outils couramment utilisés.

Conword offre des traductions en temps réel sans stocker de données sur le serveur du client. Conword est donc indépendant du CMS sous-jacent.

En résumé :

Conword fonctionne avec tous les CMS sur tous les serveurs.

Installation

Pour faire fonctionner conword, vous devez inclure la configuration de base du javascript, comme indiqué dans la section suivante. Lorsque le javascript de base est chargé, plusieurs fonctions et objets sont disponibles.

Configuration de base

Intégrer le code JS dans votre HTML

Conword fonctionne sur votre site web avec cette seule ligne de code :

<script id="conword-root" charset="utf-8" src="https://static.conword.io/js/v2/[client-id]/conword.js"></script>

Note

Vous devez disposer d'une licence valide pour votre domaine afin de pouvoir utiliser Conword. Si votre domaine ne figure pas sur la liste blanche, Conword ne fonctionnera pas sur votre site web.

Options de configuration

Si vous souhaitez configurer Conword, vous pouvez utiliser l'objet JavaScript « conword_config » pour transmettre vos paramètres à l'instance Conword.

Conword fonctionne sur votre site web avec cette seule ligne de code :

<script>
	var conword_config={
		disable_rtl_attribute:false,
		disable_language_switcher:false
	};
</script>

<script id="conword-root" charset="utf-8" src="https://static.conword.io/js/v2/[client-id]/conword.js"></script>
Paramètres disponibles
Nom de l'option Description Valeur par défaut Valeurs possibles
disable_rtl_attribute Désactive l'attribut rtl dans la <html> balise, si une langue comportant la fonctionnalité rtl est utilisée (par exemple, l'arabe). Conword définit automatiquement <html lang="rtl"> si cette option n'est pas définie sur « false ».</html></html> faux vrai, faux
désactiver_le_sélecteur_de_langue Si vous installez Conword, un menu déroulant permettant de changer de langue apparaîtra dans le coin inférieur gauche. En définissant la variable `disable_language_switcher` sur `true`, vous supprimerez ce menu déroulant. faux vrai, faux

Note

Vous pouvez utiliser Conword sans l'objet de configuration.

Exemple : désactivation du widget standard de changement de langue
<script>
	var conword_config={
		disable_language_switcher:true
	};
</script>

<script id="conword-root" charset="utf-8" src="https://static.conword.io/js/v2/[client-id]/conword.js"></script>

API JavaScript de Conword

Si vous souhaitez intégrer la fonctionnalité Conword à votre conception, vous pouvez utiliser l'API JavaScript de Conword. Pour utiliser cette API, il vous suffit d'intégrer le fichier conword.js à votre page. Voir Configuration de base

Point de terminaison de l'API

Vous pouvez utiliser l'objet JavaScript « Conword » pour appeler les méthodes de l'API.
Reportez-vous au chapitre ci-dessous pour plus d'informations.

Méthodes de l'API

Conword.translate(language_key)

Lance le processus de traduction.
C'est sans doute la fonction la plus importante dont vous avez besoin.
Remarque : lorsque vous appelez Conword.translate, la fonction Conword.set_user_language() est également appelée, ce qui permet d'enregistrer automatiquement la langue dans le stockage local. L'exemple suivant traduit la page actuelle en espagnol :
Conword.translate('es');

Conword.retranslate()

Il existe certains sites web sur lesquels du contenu est ajouté de manière dynamique à la page. Bien que Conword en soit conscient et suive ces modifications, des problèmes peuvent parfois survenir et il est alors nécessaire de relancer les traductions.
La méthode « retranslate » tente de traduire à nouveau la page dans la langue choisie.
Si la page n'a jamais été traduite auparavant, cette méthode n'aura aucun effet.
Exemple :
Conword.retranslate();

Conword.set_user_language(language_key)

Cette méthode enregistre la langue de l'utilisateur dans le stockage local. Elle est automatiquement appelée lorsque la méthode Conword.translate() est déclenchée.
N'utilisez cette fonction que si vous souhaitez enregistrer la langue de l'utilisateur sans traduire la page.
Une fois la langue de l'utilisateur définie, Conword traduira automatiquement la page lors de son prochain chargement.
L'exemple suivant définit la langue de l'espace utilisateur sur l'espagnol :
Conword.set_user_language('es');

Conword.unset_user_language()

Annule (efface) la configuration de la langue de l'utilisateur.
Exemple :
Conword.unset_user_language();

Conword.get_current_language()

Cette méthode renvoie la clé de langue actuelle (par exemple « en », « es » ou « fr »).
Exemple :
var current_langauge = Conword.get_current_language();

Conword.get_available_languages()

Cette méthode renvoie l'objet du langage JavaScript (voir Objet linguistique).
var language_data = Conword.get_available_languages();

Événements personnalisés

Conword déclenche des événements personnalisés, qui peuvent être interceptés à l'aide d'un EventLister personnalisé.
document.addEventListener("Conword:ready", function(){
	/* your code here */
});

Liste des événements personnalisés

  • « Conword:ready » : cet événement sera déclenché lorsque Conword sera chargé et initialisé.
  • « Conword:translation_started » : cet événement sera déclenché lorsque Conword commencera la traduction.
  • « Conword:translation_done » : cet événement sera déclenché lorsque Conword aura terminé une traduction.
  • « Conword:translation_failed » : cet événement sera déclenché lorsqu'une tentative de traduction aura échoué.

Objet linguistique

L'API Conword fournit un objet qui contient toutes les langues disponibles ainsi que leurs métadonnées. Cet objet peut être récupéré comme suit :

let languages=Conword.get_available_languages();
L'objet se présente comme suit :

(En fonction des langues disponibles avec votre licence).


{
    "de": {
        "name_en": "German",
        "name_de": "Deutsch",
        "name": "Deutsch",
        "rtl": false,
        "text_title": "Sprache wählen:",
        "text_1": "Die Seite wird gerade übersetzt …",
        "text_2": "Einen Moment bitte.",
        "text_error": "Beim Übersetzen der Seite ist ein Fehler ist aufgetreten."
    },
    "en": {
        "name_en": "English",
        "name_de": "Englisch",
        "name": "English",
        "rtl": false,
        "text_title": "Select language:",
        "text_1": "The page is being translated ...",
        "text_2": "One moment please.",
        "text_error": "An error occurred while translating the page."
    },
    "tr": {
        "name_en": "Turkish",
        "name_de": "Türkisch",
        "name": "Türkçe",
        "rtl": false,
        "text_title": "Dil seçin:",
        "text_1": "Sayfa çevriliyor ...",
        "text_2": "Bir dakika lütfen.",
        "text_error": "Sayfa çevrilirken bir hata oluştu."
    },
    "it": {
        "name_en": "Italian",
        "name_de": "Italienisch",
        "name": "Italiano",
        "rtl": false,
        "text_title": "Selezionare la lingua:",
        "text_1": "La pagina è in corso di traduzione ...",
        "text_2": "Un momento, per favore.",
        "text_error": "Si è verificato un errore durante la traduzione della pagina."
    }
}
  					

Exclusion du contenu

Forms

Les saisies des utilisateurs dans les champs de formulaire tels que et

L'attribut « translate »

Si vous souhaitez que certains éléments ne soient pas traduits, vous pouvez utiliser l'attribut « translate ». En lui attribuant la valeur « no », Conword ignorera cet élément ainsi que tous ses éléments enfants.

Exemple :

<div>
	<p>I will be translated</p>
	<p translate="no">
		I will NOT be translated.
		<small>Me neither, since my parent element uses the transate attrube.</small>
	</p>
	I will be translated as well
</div>

La classe "cnw_skip_translation".

Conword ignore toutes les balises HTML comportant la classe « cnw_skip_translation ».

Exemple :

<div>
	<p>I will be translated</p>
	<p class="cnw_skip_translation">
		I will NOT be translated.
		<small>Me neither, since my parent element uses the cnw_skip_translation class.</small>
	</p>
	I will be translated as well
</div>

Note : Les étiquettes vides seront automatiquement ignorées.

Il est possible d'exclure des pages entières en ne chargeant pas Conword ou en utilisant la fonction conword.lock(), disponible dans les versions récentes de Conword.

Exemples

Exclure dynamiquement le contenu portant le nom de classe « .formular_zusammenfassung »
document.addEventListener("DOMContentLoaded", function() {
	var formular_zusammenfassungen = document.querySelectorAll('.formular_zusammenfassung');
	for(var i = 0; i < formular_zusammenfassungen.length; i++){
		formular_zusammenfassungen[i].classList.add('cnw_skip_translation');
	}
});
Exemple : lien HTML pour lancer la traduction de la page en anglais
<a href="javascript:Conword.translate('en');">Translate to english</a>
						
Intégration personnalisée de Conword à votre page :
document.addEventListener("Conword:ready", function(){
	my_languages=Conword.get_available_languages();
	for (var langkey in my_languages) {

		language_meta=my_languages[langkey];

		// now you can make use of the language object - see the chapter above.
		// eg:  language_meta.name or language_meta.name_en ...
		console.debug(language_meta.name,language_meta.name_en);

		// to check if the langkey is the currently active language:
		active=false;
		if(Conword.get_current_language()==langkey) active=true;

		// jquery example of adding menu items
		$language_dropdown.append('<li><a class="'+active+'" href="javascript:start_conwordio_translation(\''+langkey+'\');" data-lang="'+langkey+'" data-langname="'+language_meta.name+'" title="Diese Seite auf \''+language_meta.name+'\' übersetzen">'+language_meta.name+'</a></li>');

	}
});

// example of a wrapper to call multiple actions (translation, menu controls, tracking, ...) at the same time
function start_conwordio_translation(lang){
	Conword.translate(lang);
	hide_menu();
	matomo_track('Translation',lang);
}

Déplacer le bouton de sélection de la langue par défaut vers la droite, à l'aide de CSS
<style>
	body .cnw_translationbox {
		right: 30px;
		left: auto;
	}
</style>
Empêcher la traduction de tous les liens « mailto: » à l'aide de JavaScript et de la classe cnw_skip_translation
document.addEventListener("DOMContentLoaded", function() {
	var mailto_links = document.querySelectorAll('a[href^="mailto:"]');
	for(var i = 0; i < mailto_links.length; i++){
		if(mailto_links[i].innerHTML.indexOf('@')>-1) mailto_links[i].classList.add('cnw_skip_translation');
	}
});
Afficher des images différentes (ou d'autres contenus) pour chaque langue

Pour des raisons de localisation, vous souhaiterez peut-être modifier le contenu de votre site web lorsque vous changez de langue.
Il existe plusieurs façons de procéder : par exemple, via des attributs HTML. Voici un exemple illustrant comment changer d'image.

Commencez par créer une image avec des attributs de données comme ceci :

<img src="bild_de.jpg" data-conword-src-de="bild_de.jpg" data-conword-src-en="image_en.jpg" data-conword-src-fr="fr.jpg" class="image_with_different_sources">

Le script JavaScript détecte les changements de langue et remplace la source de l'image par la valeur de l'attribut.

document.addEventListener("Conword:translation_done", function(){
	current_language=Conword.get_current_language();
	images_with_different_sources = document.querySelectorAll('.image_with_different_sources'); // or select [data-conword-src-de]
	images_with_different_sources= [...images_with_different_sources]; // convert list to array
	images_with_different_sources.forEach(img => {
		img.src=img.getAttribute('data-conword-src-'+current_language); // change src
	});
});

Suivi

Afin de suivre les requêtes Conword, nous recommandons d'envelopper l'appel de traduction javascript.

Exemple de script pour suivre les traductions avec Matomo (Piwik) :

<a href="javascript:custom_start_translation('en');">English</a>

<script>

	function custom_start_translation(languagekey){
		Conword.translate(language);
		matomo_track( 'Translation '+languagekey, location.href);

	}

	function matomo_track(category,action){
		if(typeof _paq !== 'undefined') {
			_paq.push(['trackEvent', category, action, 1]);
			return true;
		}
		return false
	}

</script>

Il est également possible d'effectuer un suivi à l'aide des événements personnalisés de Conword.
Voici un exemple illustrant comment suivre les traductions Conword avec Piwik (Matomo) :

<script>

	function matomo_track(category,action){
		if(typeof _paq !== 'undefined') {
			_paq.push(['trackEvent', category, action, 1]);
			return true;
		}
		return false
	}

	document.addEventListener("Conword:translation_started", function(){
		matomo_track( 'Translation '+Conword.get_current_language(), location.href);
	});

</script>

L'exemple suivant montre comment suivre les traductions de Conword à l'aide de Google Analytics :

<script>

	document.addEventListener("Conword:translation_started", function(){
		gtag('event', 'translation', {
			'url': location.href,
			'language': Conword.get_current_language()
		});
	});

</script>

Des questions ?

N'hésitez pas à nous contacter. Nous nous ferons un plaisir de vous aider.