Auf Webflow installieren

Eine Webflow-Website verbindet sich mit Universally mit einem Skript-Tag im Head-Code der gesamten Website. Das Tag rendert den Sprachumschalter und übersetzt jede Seite im Browser des Besuchers, sodass Ihre URLs in jeder Sprache gleich bleiben und kein DNS geändert werden muss. JavaScript Serving Mode erklärt, wie die Übersetzung funktioniert und was sie weglässt.

Bevor Sie beginnen

• Ein Webflow-Plan mit benutzerdefiniertem Code. Benutzerdefinierter Code erfordert einen aktiven Site-Plan oder einen Core-, Growth-, Agency- oder Freelancer-Workspace.
• Die Rolle "Owner" oder "Admin" in Ihrem Universally-Arbeitsbereich, um das Projekt zu erstellen und dessen Snippet anzuzeigen. Editoren sehen "Bitten Sie einen Projektadministrator um das Installations-Snippet für dieses Projekt." anstelle der Zeile.
• Eine veröffentlichte Website auf Ihrer eigenen Domain. Die Verbindungsprüfung sieht nur die veröffentlichte Website.

Projekt erstellen

1. Starten Sie ein neues Projekt. Wählen Sie unter Technologie auswählen die Option Webflow.
2. Geben Sie Domain ein, die vollqualifizierte Domain, auf der Ihre Website veröffentlicht ist, z. B. example.com. Wenn die Domain noch nicht auflösbar ist, sehen Sie eine Warnung und können trotzdem fortfahren.
3. Geben Sie Projektname ein, überprüfen Sie Quellsprache (standardmäßig Englisch (US)) und klicken Sie auf Weiter.

Webflow-Projekte haben keinen Serving Mode zur Auswahl, daher ist der nächste Bildschirm Snippet hinzufügen. Sprach-Subdomains sind für Webflow-Websites noch nicht verfügbar: Ihre Website wird vom Snippet auf ihren eigenen Adressen übersetzt.

Fügen Sie den Snippet hinzu

Der Schritt Snippet hinzufügen zeichnet Ihre Zeile in einer Beispielseite ein. Das Dashboard füllt den Projektschlüssel aus:

<script src="https://scripts.universally.com/p/YOUR_PUBLIC_KEY/s.js" async></script>

1. Klicken Sie auf Zeile kopieren. Es kopiert nur das Skript-Tag, und die Schaltfläche ändert sich zu Kopiert.
2. Öffnen Sie in Webflow Website-Einstellungen › Benutzerdefinierter Code › Head-Code.
3. Fügen Sie die Zeile ein und speichern Sie.

Verwenden Sie das Feld für die gesamte Website, nicht den benutzerdefinierten Code einer einzelnen Seite, damit das Skript auf jeder Seite geladen wird. Die Schaltflächen Als abgeschlossen markieren auf dem Bildschirm werden in Ihrem Browser gespeichert und blockieren nichts.

Veröffentlichen und Verbindung prüfen

1. Klicken Sie in Webflow auf Änderungen speichern und dann auf Veröffentlichen auf der Domain, die Sie in Universally eingegeben haben. Die Verbindungskontrolle sieht nur die veröffentlichte Website.
2. Zurück in Universally, klicken Sie auf Verbindung prüfen.

Die Prüfung lädt Ihre Homepage und sucht nach der Zeile. Gefunden bedeutet, dass die Zeile auf Ihrer Domain vorhanden ist, zu diesem Projekt gehört und nichts weiter installiert werden muss.

Für Ihre Besucher ändert sich noch nichts. Die Zeile lädt nur die Universally-Datei, und Ihre Website beginnt mit der Bereitstellung von Übersetzungen, sobald Sie im nächsten Schritt Sprachen hinzufügen.

Fortfahren und Ich mache das später führen beide zu Sprachen hinzufügen, und nichts wartet auf die Prüfung. Die Zeile bleibt auf der Seite Einrichtung des Projekts unter Die Zeile, die Ihre Website benötigt.

Sprachen hinzufügen

1. Klicken Sie auf Sprachen hinzufügen und beantworten Sie die Frage „In welche Sprachen möchten Sie übersetzen?“ mit mindestens einer Zielsprache.
2. Klicken Sie auf Fertig stellen. Diese Schaltfläche bleibt deaktiviert, bis das Projekt eine Sprache hat.

Der Sprachdialog zeigt immer noch das URL-Format an, aber der Wert wird für Webflow nicht verwendet, da sich Ihre URLs nie ändern. Jede Sprachzeile unter Alle Sprachen verfügt über einen Live-Schalter. Siehe Sprachen hinzufügen und entfernen.

Überprüfen Sie, ob es funktioniert hat

1. Öffnen Sie Ihre veröffentlichte Website in einem privaten Fenster. Ein erstmaliger Besucher wird automatisch seiner Browsersprache zugeordnet. Ein Browser, der auf eine Ihrer Zielsprachen eingestellt ist, sieht die übersetzte Seite.
2. Finden Sie den Sprachumschalter in der unteren rechten Ecke mit Flaggen und Sprachnamen.
3. Wählen Sie eine Sprache aus. Die Seite wird in dieser Sprache unter derselben Adresse neu geladen.

Um zu sehen, wie viel einer Seite übersetzt wurde, fügen Sie ?uni_debug=1 zur URL hinzu und öffnen Sie die Browserkonsole.

Wenn es nicht funktioniert

• Wir haben Ihre Domain geladen, aber die Zeile war nicht auf der Seite: Die Änderung wurde nicht gespeichert oder die Website seitdem nicht veröffentlicht. Veröffentlichen Sie erneut und überprüfen Sie sie. Eine zwischengespeicherte Kopie auf Ihrem Host oder CDN kann die Zeile auch eine Weile verbergen, und die Prüfung betrachtet nur Ihre Homepage.
• Diese Zeile gehört zu einem anderen Projekt: Die Zeile eines anderen Projekts befindet sich auf der Website. Ersetzen Sie sie durch die Zeile auf der Seite Einrichtung dieses Projekts und überprüfen Sie sie dann erneut.
• Es erscheint kein Umschalter: Das Projekt hat noch keine live Zielsprache. Fügen Sie eine hinzu oder aktivieren Sie deren Live-Schalter.
• Der Umschalter wird angezeigt, aber einige Texte bleiben in der Quellsprache: Die Seite ist hinter einem Login oder Passwort geschützt, oder JavaScript fügt den Text hinzu, nachdem die Seite geladen wurde. Siehe JavaScript-Serving-Modus.

Weitere Fälle finden Sie unter Übersetzungen werden nicht angezeigt und Der Umschalter ist nicht sichtbar.