Vollständige Installationsanleitung
Alles, was Sie zum Installieren, Konfigurieren und Verwenden von GoLocal! benötigen, um Ihre Bubble.io-App mehrsprachig zu machen.
Sichere Bubble-Daten, stabile UI-Übersetzung und explizite mehrsprachige Logik
Aktualisieren Sie das Plugin von Bubble Plugins Klicken Sie auf die Registerkarte, bevor Sie die folgenden Funktionen testen. Projektkonfiguration, Übersetzungen und Abrechnung bleiben mit dem GoLocal-Projekt verbunden. App-Entwickler müssen kein Skript in den HTML-Header von Bubble einfügen oder verwalten. Die veröffentlichte Plugin-Version enthält die unterstützte Laufzeit.
Bearbeitbare Daten bleiben davon unberührt
Gewöhnliche Eingaben, mehrzeilige Eingaben, Quill-Editoren und andere contenteditable-Bereiche werden während der Eingabe durch einen Benutzer nicht rückübersetzt.
Ausschlüsse wiederverwendbarer Inhalte
Schützen Sie vom Benutzer eingegebene Datenbankwerte und Wiederholungsgruppenzellen mit do_not_translate_selectors anstelle von duplizierten HTML-IDs.
Sichere automatische Rückwärtssuche
Bubble SearchBox, Dropdown, Legacy MultiDropdown und Select2 MultiDropdown können übersetzte Auswahlmöglichkeiten mit Werten in der Quellsprache abgleichen.
GoLocal Query-Element
Verwenden Sie ein unabhängiges GoLocal Query-Element pro gewöhnlicher Eingabe nur dann, wenn diese Eingabe eine Textsuche, eine Bedingung oder einen API-Filter in der Quellsprache steuert.
1 Installieren Sie das Plugin
GoLocal! ist verfügbar als kostenloses Plugin auf dem Bubble.io-Marktplatz. Sie zahlen nichts für die Installation – das Plugin selbst kostet 0 $. Die Abrechnung erfolgt nur, wenn Sie es mit einem API-Schlüssel mit einem GoLocal!-Projekt verbinden.
Öffnen Sie den Bubble-Editor → Registerkarte „Plugins“.
Klicken Sie auf „+ Plugins hinzufügen“ und suchen Sie nach „GoLocal“ oder „Auto Translator“.
Installieren Sie GoLocal! – Auto Translator. Wenn es bereits installiert ist, aktualisieren Sie es auf die neueste veröffentlichte Version.
Ziehen Sie das GoLocal!-Element auf eine beliebige Seite (normalerweise eine wiederverwendbare Kopfzeile). Das Element ist unsichtbar.
2 Erstellen Sie Ihr Konto und Projekt
Um das Plugin zu aktivieren, benötigen Sie ein API-Schlüssel. API-Schlüssel werden in Ihrem GoLocal!-Dashboard generiert, wenn Sie ein Projekt erstellen.
A 5-tägige kostenlose Testversion startet automatisch. Keine Kreditkarte erforderlich. Dein API-Schlüssel wird sofort generiert.
Kopieren Sie den Schlüssel API – Sie benötigen ihn, wenn Sie das Plugin in Bubble konfigurieren.
myapp.bubbleapps.io, geben Sie genau das ein.3 Konfigurieren Sie das Plugin
Klicken Sie auf das Element GoLocal!. Mindestens einstellen ein Feld:
Erforderliche Mindesteinrichtung:
api_key→ Fügen Sie den Schlüssel API aus Ihrem GoLocal!-Projekt einMit nur der Taste API lädt GoLocal! die Projektkonfiguration, verwendet den Browser des Besuchers oder die gespeicherte Widget-Auswahl, übersetzt sichtbaren UI-Text und zeigt den Sprachumschalter an.
4 Plugin-Felder – Referenz
api_keyErforderlichDer API-Schlüssel Ihres Projekts aus dem GoLocal!-Dashboard.
Domänengebunden – sichere Einbindung in clientseitigen Code.
source_languageOptionalZweibuchstabiger Code der Originalsprache Ihrer App. Beispiele: en, uk, de.
Lassen Sie dieses Feld normalerweise leer, wenn die Quellsprache bereits im GoLocal-Projekt konfiguriert ist. Legen Sie es nur fest, wenn Sie den Projekt-/Worker-Wert absichtlich überschreiben müssen.
target_languageOptionalLassen Sie dieses Feld normalerweise leer. Das Widget und die dauerhafte Auswahl des Besuchers steuern die aktive Sprache beim Laden der Seite.
Ein fest codierter Wert wie z fr erzwingt diese Sprache bei jeder Initialisierung des Elements und kann die Auswahl des Besuchers überschreiben. Binden Sie einen dynamischen Wert nur dann, wenn Ihre Bubble-App absichtlich den Sprachstatus besitzt und auf jeder Seite einen stabilen Sprachcode bereitstellt.
enabledOptionalKontrollkästchen, das steuert, ob die Übersetzung aktiv ist. Standard: überprüft.
show_widgetOptionalZeigt das integrierte Sprachumschalter-Widget an. Standard: überprüft. Deaktivieren Sie es nur, wenn Ihre Bubble-App eigene Sprachsteuerungen und -aufrufe bereitstellt switch_language.
widget_positionOptionalWidget-Position: bottom-right (Standard), bottom-left, top-right, top-left.
dataset_1OptionalÜbersetzen Sie Ihre Bubble-Datenbank vor, damit sie sofort geladen werden kann.
Strukturiertes Format (empfohlen):
// Bubble-Setup:
Führen Sie eine Suche nach (Kategorien) durch: Als Text formatieren
Inhalt: {Der Titel dieser Kategorie; Der Name dieser Kategorie; Der Körper dieser Kategorie}
Trennzeichen: ,
// Einen anderen Typ anhängen:
:append Führen Sie eine Suche nach (Cures) :format als Text durch
Inhalt: {Der Titel dieser Heilung; Der Name dieses Heilmittels; Das Rezept dieser Heilung}
Trennzeichen: ,
Felder drinnen { } getrennt durch ; – Blöcke getrennt durch ,. Sehen Datensätze für Einzelheiten.
do_not_translate_idsOptionalDurch Kommas getrennte Element-IDs an niemals übersetzen. Durch die Angabe einer Gruppen-/Container-ID werden alle untergeordneten Elemente ausgeschlossen.
Beispiel: user-bio, code-block, brand-section
HTML-IDs müssen eindeutig sein. Verwenden Sie nicht dieselbe ID in wiederkehrenden Gruppenzellen. Verwenden Sie stattdessen do_not_translate_selectors mit einer Klasse.
do_not_translate_selectorsOptionalCSS-Selektoren für wiederverwendbare oder sich wiederholende Inhalte, die genau so bleiben müssen, wie sie gespeichert sind. Ein passendes Element und alle seine untergeordneten Elemente werden ausgeschlossen.
Beispiele: .gl-user-content, [data-user-content], [id^="gl-user-content-"]
Empfohlen für vom Benutzer eingegebene Datenbankwerte und sich wiederholende Gruppen. Ein Klassen- oder ID-Präfix-Selektor kann viele Zeilen sicher abgleichen, ohne doppelte HTML-IDs zu erstellen.
private_translate_idsOptionalElemente, die werden übersetzt aber Übersetzungen werden nicht global zwischengespeichert. Verwendung für benutzerspezifische Daten (Namen, Adressen).
Beispiel: user-name, order-address
Wenn der Inhalt genau so bleiben muss, wie der Benutzer ihn eingegeben hat, verwenden Sie dieses Feld nicht. Schließen Sie es stattdessen mit do_not_translate_selectors aus.
5 Datensätze – Übersetzen Ihrer Bubble-Datenbank
Die meisten Bubble-Apps zeigen Daten aus der Datenbank an. Ohne Datensätze werden dynamische Inhalte auf den ersten Blick übersetzt, was zu einer sichtbaren Verzögerung führt. Datensätze übersetzen alles vor sofortiges Laden.
Format 1: Strukturiert – für Elemente mit mehreren Feldern (empfohlen)
Wickeln Sie jeden Artikel ein {}, Felder mit trennen ; (Semikolon), verwenden , als Trennzeichen zwischen Elementen.
// Bubble: Führen Sie eine Suche nach (Kategorien) durch: als Text formatieren
Inhalt: {Der Titel dieser Kategorie; Der Name dieser Kategorie; Der Körper dieser Kategorie}
Trennzeichen: ,
// Anhängen: Führen Sie eine Suche nach (Cures) durch: als Text formatieren
Inhalt: {Der Titel dieser Heilung; Der Name dieses Heilmittels; Das Rezept dieser Heilung}
Trennzeichen: ,
// Ergebnis: {Gesundheit;Wellness;Ratgeber...},{Schönheit;Hautpflege;Routinen...},{Aspirin; Linderung; 2x einnehmen...}
{} geteilt durch ; – Blöcke geteilt durch , – Kommas in Ihrem Text sind sicher.Format 2: Einfach – für Einzelwertlisten
Für kurze Werte ohne Kommas (Kategorienamen, Tags):
Inhalt: Der Name dieser Kategorie Trennzeichen: ,
// Ausgabe: Elektronik, Kleidung, Bücher, Spielzeug
Wichtig: Wenn der Text Kommas enthalten kann, verwenden Sie immer das strukturierte Format mit {field;field} Verpackung.
normalized_query nur im Filter oder Zustand. Sehen Sie sich die vollständige Bubble-Anleitung an.6 Bubble Zustände, Ereignisse und Aktionen
Das Hauptelement GoLocal! ist für die Seitenübersetzung zuständig und stellt Bubble die aktive Sprache zur Verfügung. Verwenden Sie seine Zustände in Bedingungen und seine Ereignisse, um Arbeitsabläufe am richtigen Punkt im Übersetzungslebenszyklus zu starten.
1. Laufzeit bereit
translator_ready = yes bedeutet, dass GoLocal initialisiert wurde. Dies bedeutet nicht, dass jedes dynamische Bubble-Element die Übersetzung abgeschlossen hat.
2. Sprache geändert
language_changed Wird ausgelöst, wenn sich die aktive Sprache ändert. Lesen current_language Hier.
3. Pass abgeschlossen
translation_complete Wird ausgelöst, nachdem ein Übersetzungsstapel abgeschlossen ist. Durch dynamische Inhalte können spätere Stapel erstellt werden.
current_languagetextDer aktive zweibuchstabige Sprachcode. Verwenden Sie es für PDF-Links, Bubble-Bedingungen und die Benutzeroberfläche der App-eigenen Sprache.
detected_languagetextDie von der Laufzeit gemeldete erkannte Quell-/Browsersprache.
translator_readyyes/noJa, nachdem die Übersetzungslaufzeit initialisiert wurde.
is_translatingyes/noJa, während GoLocal einen Übersetzungsdurchlauf verarbeitet.
translation_completeyes/noAbschlussflag für den letzten Durchgang.
total_textsnumberAnzahl der in der aktuellen Laufzeitsitzung beobachteten Textelemente.
cached_local / cached_bundle / cached_servernumberDiagnose-Cache-Zähler. Nützlich für Support- und Leistungsprüfungen.
übersetzt / Fehler / tokens_usednumberLaufzeitübersetzung und Fehlerzähler.
last_error / preload_statustextDer neueste Laufzeitfehler und Preload-Status für die Diagnose.
Elementaktionen
switch_language— Wechseln Sie zum gewünschten Aktionsfeldtarget_lang, Zum Beispielfr.Start_translation— mit dem Beobachten und Übersetzen beginnen oder fortfahren.Stop_translation– Hören Sie mit dem Beobachten und Übersetzen auf, bis Sie es neu starten.rescan_dom– Inhalte, die nach einem Bubble-Popup, einem wiederverwendbaren Element oder einer Wiederholungsgruppenaktualisierung gerendert werden, explizit scannen.
Beispiel: Einen französischen PDF-Link anzeigen
Erstellen Sie eine Bubble-Bedingung für den Link oder die Gruppe: When GoLocal! A's current_language is "fr". Wenn ein Workflow ausgeführt werden muss, wenn der Besucher die Sprache wechselt, verwenden Sie When GoLocal! A language_changed. Sie müssen nicht warten translation_complete nur um die ausgewählte Sprache zu lesen.
7 Benutzerdaten, Formulare und sich wiederholende Gruppen
GoLocal übersetzt den Schnittstellentext, die von Ihren Benutzern eingegebenen oder erstellten Daten müssen jedoch stabil bleiben. Die aktuelle Laufzeit schützt normale Eingaben, mehrzeilige Eingaben, Quill-Editoren und andere contenteditable Bereiche, während eine Person tippt.
Standardmäßig sicher
- • Eingabewerte und mehrzeilige Eingabewerte werden genau so gespeichert, wie sie eingegeben wurden.
- • Quill
.ql-editorund andere bearbeitbare Bereiche werden während der Eingabe übersprungen. - • E-Mails, Passwörter, Nummern, Daten, IDs und Dateien sollten immer ihre ursprünglichen Bubble-Werte verwenden.
Für die Anzeige ist ein Ausschluss erforderlich
Wenn gespeicherte Benutzerinhalte später von einem normalen Bubble-Textelement angezeigt werden, kann GoLocal nicht wissen, ob es sich um eine UI-Kopie oder um Benutzerdaten handelt. Markieren Sie dieses Anzeigeelement oder seinen kleinsten Container als Nicht-Übersetzungszone.
Empfohlene Wiederholungsgruppeneinrichtung
- 1. Wählen Sie nur das Textelement aus, das Benutzerinhalte anzeigt. Schließen Sie nicht die gesamte Wiederholungsgruppe aus, wenn ihre Schaltflächen, Überschriften und statischen Beschriftungen noch übersetzt werden sollen.
- 2. Geben Sie jeder Zeile eine eindeutige dynamische ID.gl-user-content-Die eindeutige ID des Dings der aktuellen Zelle
- 3. Fügen Sie einen Selektor zum GoLocal-Element hinzu.do_not_translate_selectors = [id^="gl-user-content-"]
Wenn Ihr Bubble-Setup oder ein wiederverwendbares Element eine benutzerdefinierte Klasse anwenden kann, .gl-user-content ist noch einfacher. Fügen Sie diese Klasse einmal hinzu do_not_translate_selectors.
Unterstützte No-Translate-Marker
Die Laufzeit respektiert data-tr-skip, data-no-translate, translate="no", und verschachtelt .notranslate Elemente. Die konfigurierten ID- und CSS-Auswahlfelder bleiben die einfachste Bubble-native Methode.
Überspringen versus private Übersetzung
do_not_translate_* bewahrt den ursprünglichen Wert. private_translate_ids übersetzt den Wert immer noch, verhindert aber einen gemeinsamen globalen Cache. Verwenden Sie eine private Übersetzung nur dann, wenn der Inhalt tatsächlich übersetzt werden sollte.
home oder check_box. Wenn ein Symbol textgestützt ist, schließen Sie den kleinsten Symbol-/Steuerelementcontainer aus, damit das Schlüsselwort glyph nie übersetzt wird.8 Übersetzungseditor und manuelle Korrekturen
Verwenden Sie den Übersetzungseditor für feste Produktkopien: Navigationsbeschriftungen, Überschriften, Schaltflächen, Hilfetexte und andere Phrasen, die eine überprüfte Übersetzung haben sollten. Manuelle Eingaben sind gesperrt und werden nicht durch eine spätere automatische Übersetzung ersetzt.
Gute manuelle Korrektur
Quelle Upgrade-Plan → überprüfte französische Produktphrase Verbessern Sie den Plan. Dies ist eine stabile Schnittstellenkopie und gehört in den Editor.
Korrigieren Sie Benutzerdaten nicht zeilenweise
Ein vom Kunden erstellter Name wie z Arbeit am Wohnort sollte am Anzeigeelement Bubble ausgeschlossen werden. Das Hinzufügen von Tausenden von Identitätsübersetzungen ist kein sicherer Ersatz für eine Zone ohne Übersetzung.
- 1. Öffnen Sie das Projekt im GoLocal-Dashboard und wählen Sie Übersetzungen.
- 2. Suchen Sie nach der genauen Ausgangsphrase und dem Sprachpaar.
- 3. Bearbeiten Sie den Zielwert oder verwenden Sie ihn Übersetzung hinzufügen für eine neue genaue Quellphrase.
- 4. Speichern. Der Eintrag ist markiert Handbuch, die Bundle-Version ändert sich und die Laufzeit aktualisiert das Projektwörterbuch.
- 5. Testen Sie die genaue Bubble-Route erneut, auf der die Phrase gerendert wird. Verwenden
rescan_domnur, wenn die Phrase nach einem ungewöhnlichen Drittanbieter-Rendering erscheint.
en → fr, nicht auto → fr. Die Laufzeit fordert das aufgelöste Quellpaar des Projekts an.9 So funktioniert die Übersetzung
GoLocal überwacht das gerenderte Bubble DOM, wendet zuerst Übersetzungen aus dem Projektpaket und dem lokalen Cache an und fordert nur fehlende oder geänderte Phrasen an. Es beobachtet weiterhin Popups, wiederverwendbare Elemente und sich wiederholende Gruppen, die Bubble später rendert.
Erster Seitenladevorgang
Die Laufzeit löst Quell- und Zielsprachen auf, lädt das aktuelle Projektpaket, scannt sichtbaren UI-Text und zeigt die Seite über den integrierten Anti-Flimmer-Flow an.
Zwischengespeicherte Übersetzungen
Bekannte Phrasen werden aus dem Bundle- oder Browser-Cache übernommen, ohne sie neu zu generieren. Eine geänderte Bundle-Version macht veraltete zwischengespeicherte Werte ungültig.
Dynamischer Bubble-Inhalt
Der DOM-Beobachter erfasst neu gerenderte Popups, wiederverwendbare Elemente, bedingt sichtbare Gruppen und Zellen mit sich wiederholenden Gruppen. rescan_dom ist ein expliziter Fallback.
10 Fehlerbehebung und Release-Tests
Die Seite wird auf eine Sprache zurückgesetzt
Lassen Sie target_language auf jeder Seite leer und das wiederverwendbare GoLocal-Element, es sei denn, Ihre Bubble-App ist absichtlich Eigentümer der Sprache. Bei der Initialisierung wird erneut ein fest codierter Wert angewendet.
Das Widget fehlt
Bestätigen Sie, dass show_widget aktiviert ist, die neueste Plugin-Version installiert ist und nur ein vorgesehenes GoLocal-Element die Seite steuert. Testen Sie dann den Schritt-für-Schritt-Debugger-Modus außerhalb von Bubble.
Ein Popup oder eine neue Wiederholungsgruppenzeile bleibt unübersetzt
Warten Sie, bis das Element sichtbar wird. Der Beobachter findet es normalerweise automatisch; Wenn ein Element eines Drittanbieters ungewöhnlich gerendert wird, führen Sie rescan_dom aus, nachdem das Popup oder die Gruppe angezeigt wird.
Eingabe- oder Rich-Text-Änderungen während der Eingabe
Aktualisieren Sie das Plugin, bestätigen Sie die aktuelle Laufzeit und stellen Sie sicher, dass der Speicherworkflow den ursprünglichen Eingabe-/Editorwert liest – nicht den übersetzten Anzeigetext oder normalized_query.
Vom Benutzer erstellter französischer Text wird erneut übersetzt
Schließen Sie den Anzeigetext/Container über do_not_translate_selectors aus. Schützen Sie den kleinsten dynamischen Wert, nicht die gesamte statische Benutzeroberfläche um ihn herum.
Eine manuelle Korrektur kehrt zur automatischen Korrektur zurück
Aktuelle manuelle Eingaben sind gesperrt. Bestätigen Sie, dass Sie denselben Quelltext und dasselbe Sprachpaar bearbeitet haben, das von der Laufzeit verwendet wird, und senden Sie dann das Projekt, die Route, den Ausdruck und die Testzeit an den Support.
Monats-/Tagesnamen bleiben in Englisch
Der native Browser oder Bubble-Datumsauswahl-Chrome folgt dem Browser-/Steuerelementgebietsschema. GoLocal übersetzt umliegende Beschriftungen, schreibt die interne Benutzeroberfläche für die Datumsauswahl jedoch nicht neu.
Chrome bietet eine eigene Seitenübersetzung
Das Plugin markiert das Dokument bereits als „notranslate“ für die Browserübersetzung und ermöglicht gleichzeitig die Ausführung von GoLocal. Aktualisieren Sie das Plugin; Fügen Sie keine zweite Übersetzungserweiterung oder kein zweites Skript hinzu.
Der Text wird nach der Übersetzung anders umbrochen
GoLocal behält die Bubble-Typografie bei. Übersetzte Phrasen können länger sein. Überprüfen Sie daher die minimale Breite, die maximale Breite, die Anpassungshöhe, den Überlauf und die Reaktionsregeln von Bubble an jedem Haltepunkt.
Bubble Abnahme-Checkliste
- ✓Wechseln Sie Quelle → Ziel → Quelle ohne Aktualisierung.
- ✓Navigieren Sie zwischen allen Bubble-Seiten und wiederverwendbaren Headern.
- ✓Öffnen Sie Popups und laden Sie Wiederholungsgruppenzeilen nach dem Laden der Seite.
- ✓Geben Sie normale und Rich-Text-Felder ein, fügen Sie sie ein, bearbeiten Sie sie, speichern Sie sie und öffnen Sie sie erneut.
- ✓Testen Sie einen ausgeschlossenen Benutzerdatenwert innerhalb jeder Wiederholungsgruppe.
- ✓Testen Sie die Suche SearchBox, Dropdown, Legacy/Select2 MultiDropdown.
- ✓Testen Sie jeden bedingten current_language- und PDF-/Ressourcen-Link.
- ✓Testen Sie Chrome, Safari, die mobile Breite und eine private Sitzung erneut.
[GoLocal v4].11 Preise& Abrechnung
Drei Pläne, alle mit unbegrenzte Übersetzungswörter und unbegrenzte Zielsprachen.
| Besonderheit | Starter | Profi | Business |
|---|---|---|---|
| Monatspreis | $15/mo | $35/mo | $89/mo |
| Jahrespreis | $149/yr | $349/yr | $890/yr |
| Zielsprachen | Unbegrenzt | Unbegrenzt | Unbegrenzt |
| MAU-Grenze | 30K | 150K | 1M |
| Projekte | 1 | 1 | 2 |
MAU
Einzigartige Besucher, die Übersetzungen gesehen haben. Bots herausgefiltert. 10 % Überschreitung kostenlos, dann 3 $/10.000 extra.
Sprachen
Alle kostenpflichtigen Pläne beinhalten unbegrenzte Zielsprachen ohne zusätzliche Gebühr pro Sprache.
5-tägige kostenlose Testversion
Jedes neue Projekt beginnt mit einer kostenlosen Testversion. Keine Kreditkarte erforderlich.
12 Partnerprogramm
Verdienen Sie Geld, indem Sie GoLocal! weiterempfehlen
Teilen Sie Ihren Empfehlungslink – verdienen Sie wiederkehrende Provisionen für jeden zahlenden Kunden, den Sie mitbringen.
Melden Sie sich als Partner an
Dashboard → Registerkarte „Partner“ → „Partnerprogramm beitreten“. Holen Sie sich Ihren einzigartigen Empfehlungslink.
Teilen Sie Ihren Link
Blog, YouTube, Bubble-Forum, soziale Medien, Tutorials oder direkt mit Kunden.
Verdienen Sie Provisionen
Wiederkehrende Provision für die gesamte Laufzeit des Abonnements jedes empfohlenen Benutzers.
Lass dich bezahlen
Fordern Sie eine Auszahlung per Banküberweisung oder PayPal an, wenn der Saldo den Mindestbetrag erreicht.
Sind Sie bereit, Ihre App mehrsprachig zu gestalten?
Installieren Sie das kostenlose Plugin, erstellen Sie ein Projekt, fügen Sie Ihren API-Schlüssel ein – und Ihre Bubble-App spricht jede Sprache.