Dieser Artikel behandelt die Implementierung der Nachrichten- und Bewertungskacheln.

Einbetten der Kacheln

Wenn ein Unternehmen eines der oben genannten Produktplanelemente aktiviert hat, wird auf Standortebene ein zusätzlicher Tab mit dem Titel „Websites“ in der Plattform angezeigt. Dieser neue Tab ist nur auf Standortebene sichtbar, da die Kacheln standortspezifisch und für KMU bestimmt sind.

Im neuen Tab kann der Benutzer die Textbausteine sowohl für die Kachel „Rezension“ als auch für die Kachel „Bewertungen“ kopieren.

( Hinweis: Der Benutzer sollte seine eigene Datenschutzerklärung-URL in den Einstellungen für die Kachel "Bewertung" hinzufügen.)

Kachel überprüfen

• Rezensionen von Erstanbietern sind im Posteingang sichtbar, genau wie Rezensionen von anderen Kanälen.
• Die Bewertungskachel enthält ausschließlich Bewertungen von Google, Facebook und Erstanbietern.

Implementieren Sie die Kacheln in einer Single-Page-Anwendung (SPA).

Einführung

Die Kacheln funktionieren sofort für serverseitig gerenderte Seiten. Bei Seiten, die nur einmal beim Start gerendert werden und bei denen das Browserfenster beim Klicken auf eine andere Seite nicht neu gerendert wird (Single-Page-Anwendungen), ist jedoch eine manuelle Konfiguration erforderlich, damit die Kacheln funktionieren. Dies ist häufig bei Websites der Fall, die gängige Frameworks wie React, Vue.js oder Angular verwenden.

Zu befolgende Schritte

Schritt 1

Fügen Sie das initiale tiles-script zu Ihrem HTML-Code hinzu:

Schritt 2

Fügen Sie den Container-Div zu Ihrer Komponente innerhalb der Single-Page-Anwendung hinzu:

Die Kacheln werden bei einer Single-Page-Anwendung (SPA) nicht automatisch geladen, da das Skript das Element "<ub-widget-review>" nicht finden kann. Dieses wird erst bei der Ausführung von JavaScript gerendert.

Schritt 3

Wenn Sie die Route mit den Kacheln im HTML-Code aufrufen, müssen Sie Folgendes aufrufen:

Die Kacheln sollten nun angezeigt werden und einwandfrei funktionieren.

Schritt 4

Wenn Sie innerhalb des SPA eine andere Route nehmen, müssen Sie anrufen.

Beim Aushängen der Filialfinder-Komponente wird sichergestellt, dass alle Komponenten korrekt ausgehängt werden und beim erneuten Aufruf der Ansicht ordnungsgemäß wieder gestartet werden können.

Beispiel

Hier ist ein Beispiel-Repository mit einer React-Implementierung, in der diese Tiles-Komponente den größten Teil der oben beschriebenen Logik enthält .

Implementieren Sie die Kachel „Überprüfung“ per API.

Prüfen, ob das Widget bereits existiert (der Codeausschnitt darf nicht null sein).

ERHALTEN https://uberall.com/api/locations/$locationId/widgets?v=20191203

Erstellen Sie ein Widget, z. B. für den Typ „Rezension“.

POSThttps://uberall.com/api/locations/$locationId/widgets?v=20191203&type=REVIEW

Widget-Konfiguration aktualisieren

PATCHhttps://uberall.com/api/locations/$locationId/widgets?v=20191203{"widgets":[{"id": $widgetId ,"type":"REVIEW","config":{"language":"en","privacyPolicyUrl":"","reviewDirectories":["GOOGLE","FACEBOOK","WEBSITE_WIDGETS"]}}]}

Implementieren Sie die News-Kachel per API

Prüfen, ob das Widget bereits existiert (der Codeausschnitt darf nicht null sein).

ERHALTEN https://uberall.com/api/locations/$locationId/widgets?v=20191203

Widget erstellen

POSThttps://uberall.com/api/locations/$locationId/widgets?v=20191203&type=SOCIALPOST

Beispiele für die Implementierung des Bewertungs-Widgets

Unternehmen	URL	Screenshot
Cindy, die Crash Champions	https://crashchampions.com/locations/crash-champions-chicago-heights
Soundkistn	https://www.soundkistn.org/