Lingue disponibili

L'elenco delle lingue attualmente disponibili e i relativi codici lingua ('en', 'fr', 'de', ...) è disponibile qui: https://conword.io/sprachen/

Prerequisiti

Il frontend di conword è scritto in semplice javascript, quindi non si basa su alcun framework. Pur non dipendendo da codice di terze parti, funziona bene con jquery e altri strumenti comunemente utilizzati.

Conword offre traduzioni in tempo reale senza memorizzare alcun dato sul server del cliente. Ciò rende Conword indipendente dal CMS sottostante.

Impostazione di base

Incorporare il codice JS nell'HTML

Conword funziona sul vostro sito web con questa singola riga di codice:

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

Opzioni di configurazione

Se desideri configurare Conword, puoi utilizzare l'oggetto JavaScript "conword_config" per trasmettere le tue impostazioni all'istanza di Conword.

Conword funziona sul vostro sito web con questa singola riga di codice:

<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>

Impostazioni disponibili

Esempio: disattivazione del widget standard per il cambio di lingua

<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>

Notifica AI

Alcuni siti web sono tenuti a informare i propri visitatori che il contenuto che stanno leggendo è stato generato dall'intelligenza artificiale. Con l'opzione ai_notification, Conword mostra automaticamente tale notifica quando la pagina viene tradotta per la prima volta.

La notifica viene visualizzata una sola volta per ogni browser (Conword la memorizza nella memoria locale). Il testo viene inserito nella lingua di origine del tuo sito (tedesco o inglese; per le altre lingue di origine viene utilizzato il testo in inglese) proprio prima che inizi la traduzione, in modo che venga tradotto insieme al resto della pagina. Il testo indica la lingua originale del tuo sito.

Valori delle opzioni

• falso – nessuna notifica. Questa è l'impostazione predefinita, anche se l'opzione non è presente nel file di configurazione.
• "top" – Nella parte superiore della pagina viene inserita una barra di notifica che può essere chiusa. Questa rimane fissa nella parte superiore della finestra di visualizzazione durante lo scorrimento, finché il visitatore non la chiude.
• "modale" – Si apre una finestra di dialogo modale che il visitatore deve confermare.

Barra delle notifiche nella parte superiore della pagina

L'utente può chiudere la barra cliccando sul simbolo "✕":

<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>

Finestra di dialogo modale

La finestra di dialogo deve essere confermata dal visitatore:

<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>

Visualizza nuovamente la notifica

Se desideri visualizzare nuovamente la notifica (ad esempio cliccando su un link "ulteriori informazioni"), utilizza Conword.show_ai_notification(). L'evento "Conword:ai_notification_shown" viene attivato ogni volta che viene visualizzata la notifica.

Styling

La barra delle notifiche ha l'ID "cnw_ai_notification", mentre la finestra di dialogo modale ha l'ID "cnw-ai-dialog". Entrambe hanno la classe "cnw_ai_notification", quindi puoi personalizzarne l'aspetto con i tuoi fogli CSS.

API Javascript di Conword

Se desideri integrare la funzionalità di Conword nel tuo progetto, puoi utilizzare l'API JavaScript di Conword. Per utilizzare l'API, è sufficiente integrare il file conword.js nella tua pagina. Vedi Impostazione di base

Punto finale API

È possibile utilizzare l'oggetto JavaScript "Conword" per richiamare i metodi dell'API.
Per ulteriori informazioni, consultare il capitolo seguente.

Metodi 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();

Eventi personalizzati

document.addEventListener("Conword:ready", function(){
	/* your code here */
});

Elenco di eventi personalizzati

• "Conword:ready": viene attivato quando Conword viene caricato e inizializzato.
• "Conword:translation_started" - viene attivato quando Conword inizia a tradurre.
• "Conword:translation_done": viene attivato quando Conword ha terminato una traduzione.
• "Conword:translation_failed" - verrà attivato quando un tentativo di traduzione non va a buon fine.
• "Conword:ai_notification_shown" - verrà attivato quando verrà visualizzata la notifica AI (vedere l'opzione ai_notification).

Oggetto linguistico

L'API Conword fornisce un oggetto che contiene tutte le lingue disponibili e i loro metadati. L'oggetto può essere recuperato in questo modo:

let languages=Conword.get_available_languages();

L'oggetto si presenta così:

(a seconda delle lingue disponibili con la licenza).

{
    "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."
    }
}
  					

Escluso il contenuto

Moduli

I dati inseriti dall'utente nei campi del modulo come e verranno ignorati da Conword.</strong> Gli attributi "labels" e "placeholder" verranno invece tradotti.<br> Poiché Conword non è in grado di sapere quando vengono visualizzati i dati inseriti dall'utente, potresti voler escludere questo codice HTML dalle traduzioni effettuate da Conword. Pertanto, se alla fine del modulo è presente un riepilogo dei dati inseriti, dovrai utilizzare il seguente metodo:

L'attributo "translate"

Se desideri che alcuni elementi non vengano tradotti, puoi utilizzare l'attributo "translate". Impostandone il valore su "no", Conword ignorerà quell'elemento e tutti i suoi elementi figli.

Esempio:

<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 ignorerà tutti i tag HTML che contengono la classe "cnw_skip_translation".

Esempio:

<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'attributo "data-conword-skip-translation"

Un attributo data senza valore. Conword ignorerà l'elemento e tutti i suoi figli, proprio come nel caso della classe sopra indicata. Utile se non si desidera modificare le classi di un elemento.

Esempio:

<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>

Le tue classi: l'opzione "skip_classes"

Se il tuo CMS o il tuo template contrassegna già i contenuti che non devono essere tradotti con una propria classe, non è necessario aggiungere "cnw_skip_translation" ovunque. Elenca invece le tue classi nell'opzione skip_classes (vedi Opzioni di configurazione). Gli elementi con una di queste classi, e tutti i loro elementi figli, vengono trattati esattamente come gli elementi con "cnw_skip_translation".

Esempio:

<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>

Altri modi

Viene riconosciuta anche la classe "notranslate". Gli script, i fogli di stile, i contenuti SVG, le immagini, gli elementi `noscript` e `textarea` vengono sempre ignorati. I dati inseriti dall'utente nei campi dei moduli non vengono mai tradotti, mentre le etichette e i placeholder sì.

Nota: i tag vuoti verranno saltati automaticamente.

È possibile escludere intere pagine evitando di caricare Conword oppure utilizzando la funzione conword.lock(), disponibile nelle versioni più recenti di Conword.

Esempi

Esclusione dinamica dei contenuti con il nome di classe ".formular_zusammenfassung"

Per questo tipo di marcatura, utilizza l'evento "Conword:ready": viene attivato proprio prima che una lingua utente salvata avvii la traduzione automatica, quindi la classe è già pronta in tempo. L'evento "DOMContentLoaded" potrebbe essere troppo tardivo, poiché Conword stesso si avvia proprio in quel momento.

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');
	}
});

Esempio: Link HTML per avviare la traduzione della pagina in inglese

<a href="javascript:Conword.translate('en');">Translate to english</a>
						

Integrazione personalizzata di Conword nella vostra pagina:

Tre selettori di lingua completi (link, menu a tendina, pulsanti con bandierine), funzionanti e con codice: demo: come creare il proprio selettore di lingua.

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);
}

Spostare il selettore della lingua predefinita verso destra, con i CSS

<style>
	body .cnw_translationbox {
		right: 30px;
		left: auto;
	}
</style>

Altre posizioni e combinazioni di colori per il selettore predefinito, applicate in tempo reale: demo: restyling del selettore di lingua predefinito.

Impedire la traduzione di tutti i link "mailto:" utilizzando JavaScript e 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');
	}
});

Mostra immagini diverse (o altri contenuti) per ogni lingua

Per motivi di localizzazione, potresti voler sostituire i contenuti del tuo sito web quando cambi la lingua.
Esistono diversi modi per gestire questa operazione: ad esempio tramite attributi HTML. Ecco un esempio di come sostituire le immagini.

Per prima cosa, crea un'immagine con attributi di dati come questa:

<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">

Il codice JavaScript rileva i cambiamenti di lingua e sostituisce l'attributo src dell'immagine con il valore dell'attributo.

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
	});
});

Tracciamento

Per tenere traccia delle richieste Conword, si consiglia di avvolgere la chiamata di traduzione javascript.

Esempio di script per tracciare le traduzioni con 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>

In alternativa, il monitoraggio può essere effettuato utilizzando gli eventi personalizzati di Conword.
Ecco un esempio di come monitorare le traduzioni di Conword con 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'esempio seguente mostra come monitorare le traduzioni di Conword con Google Analytics:

<script>

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

</script>