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.

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>

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,
		ai_notification:false,
		skip_classes:[]
	};
</script>

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

Paramètres disponibles

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>

Notification IA

Certains sites web sont tenus d'informer leurs visiteurs que le contenu qu'ils consultent a été généré par une IA. Grâce à l'option « ai_notification », Conword affiche automatiquement cette notification lorsque la page est traduite pour la première fois.

La notification s'affiche une seule fois par navigateur (Conword enregistre cette information dans la mémoire locale). Le texte est inséré dans la langue source de votre site (allemand ou anglais ; pour les autres langues sources, c'est le texte anglais qui s'affiche) juste avant le début de la traduction, de sorte qu'il soit traduit en même temps que le reste de la page. Il mentionne la langue d'origine de votre site.

Valeurs des options

• faux – aucune notification. Il s'agit du comportement par défaut, même si l'option n'apparaît pas dans votre fichier de configuration.
• « top » – Une barre de notification pouvant être masquée s'affiche en haut de la page. Elle reste ancrée en haut de la fenêtre d'affichage pendant le défilement, jusqu'à ce que le visiteur la ferme.
• « modal » – une boîte de dialogue modale s'ouvre, que le visiteur doit valider.

Barre de notifications en haut de la page

Le visiteur peut fermer la barre en cliquant sur le « ✕ » :

<script>
	var conword_config={
		ai_notification:"top"
	};
</script>

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

Boîte de dialogue modale

La boîte de dialogue doit être validée par le visiteur :

<script>
	var conword_config={
		ai_notification:"modal"
	};
</script>

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

Afficher à nouveau la notification

Si vous souhaitez afficher à nouveau la notification (par exemple, via un lien « Plus d'informations »), utilisez Conword.show_ai_notification(). L'événement « Conword:ai_notification_shown » est déclenché chaque fois que la notification s'affiche.

Styling

La barre de notification porte l'identifiant « cnw_ai_notification », tandis que la boîte de dialogue modale porte l'identifiant « cnw-ai-dialog ». Les deux portent la classe « cnw_ai_notification », ce qui vous permet d'adapter leur apparence à l'aide de votre propre feuille de style CSS.

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)

Conword.translate('es');

Conword.retranslate()

Conword.retranslate();

Conword.set_user_language(language_key)

Conword.set_user_language('es');

Conword.unset_user_language()

Conword.unset_user_language();

Conword.get_current_language()

var current_langauge = Conword.get_current_language();

Conword.get_available_languages()

var language_data = Conword.get_available_languages();

Conword.show_ai_notification(mode)

Conword.show_ai_notification('modal');

Conword.close_ai_notification()

Conword.close_ai_notification();

Événements personnalisés

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é.
• « Conword:ai_notification_shown » : cet événement sera déclenché lorsque la notification IA (voir l'option ai_notification) aura été affichée.

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 seront ignorées par Conword.</strong> Les libellés et les attributs « placeholder » seront toutefois traduits.<br> Étant donné que Conword ne peut pas savoir quand les données utilisateur sont affichées, vous souhaiterez peut-être exclure ce code HTML des traductions effectuées par Conword. Ainsi, si vous disposez d'un récapitulatif des saisies à la fin de votre formulaire, vous devez utiliser la méthode suivante :

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>

L'attribut « data-conword-skip-translation »

Un attribut de données sans valeur. Conword ignorera l'élément et tous ses enfants, tout comme avec la classe ci-dessus. Pratique si vous ne souhaitez pas modifier les classes d'un élément.

Exemple :

<div>
	<p>I will be translated</p>
	<p data-conword-skip-translation>
		I will NOT be translated.
		<small>Me neither, since my parent element uses the data-conword-skip-translation attribute.</small>
	</p>
</div>

Vos propres cours : l'option « skip_classes »

Si votre CMS ou votre modèle attribue déjà une classe spécifique au contenu qui ne doit pas être traduit, vous n'avez pas besoin d'ajouter « cnw_skip_translation » partout. Indiquez plutôt vos classes dans l'option « skip_classes » (voir Options de configuration). Les éléments dotés de l'une de ces classes, ainsi que tous leurs éléments enfants, sont traités exactement comme les éléments portant la classe « cnw_skip_translation ».

Exemple :

<script>
	var conword_config={
		skip_classes:["no-translate", "legal-text"]
	};
</script>

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

<div>
	<p>I will be translated</p>
	<p class="legal-text">
		I will NOT be translated.
		<small>Me neither, since my parent element uses one of the configured classes.</small>
	</p>
</div>

Autres moyens

La classe « notranslate » est également prise en compte. Les scripts, les feuilles de style, le contenu SVG, les images, les éléments `noscript` et `textarea` sont toujours ignorés. Les données saisies par l'utilisateur dans les champs de formulaire ne sont jamais traduites, contrairement aux libellés et aux textes de remplacement.

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 »

Utilisez l'événement « Conword:ready » pour ce type de marquage : il est déclenché juste avant qu'une langue utilisateur enregistrée ne lance la traduction automatique, ce qui permet à la classe d'être en place à temps. L'événement « DOMContentLoaded » peut intervenir trop tard, car Conword lui-même démarre lors de cet événement.

document.addEventListener("Conword:ready", 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 :

Trois sélecteurs de langue complets (liens, menu déroulant, boutons avec drapeaux), en temps réel et avec le code : démo : créer son propre sélecteur de langue.

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>

Plus de positions et de combinaisons de couleurs pour le sélecteur par défaut, appliquées en temps réel : démo : refonte du sélecteur de langue par défaut.

Empêcher la traduction de tous les liens « mailto: » à l'aide de JavaScript et de la classe cnw_skip_translation

document.addEventListener("Conword:ready", 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>