one.pages: Widget Builder

one.pages: Widget Builder

Widgets und HTML Scripte erstellen mit dem Widget Builder

Der Widget Builder erstellt Widgets auf Webcomponent-Basis für die Integration von one.pages Inhalten (Detailseite, Ergebnisliste, Tagesplaner, Chatwidget, etc) in Fremd-Webseiten, bzw. Drittwebseiten.

Info
Für den Widget Builder benötigt ihr entweder die one.pages PWA (ehemals destination.welcome) oder gebuchte Themenwidgets. Wendend euch bei Interesse an sales@destination.one oder eure Ansprechpartner:in.
 

Hauptfunktionen des Widget Builders

  1. Einbindung in andere Webseiten

    1. Die strukturierten Event-Datensätze aus destination.data als Veranstaltungskalender auf der Städte-Seite? Die Highlight POIs als Ergebnisliste für die Hotel Websites im Ort? Genau dafür könnt ihr euch und euren Partner:innen mit dem Widget Builder die benötigten HTML-Scripte zusammen stellen.

  2. Anpassung und Konfiguration

    • Die Farbgestaltung der Widgets richtet sich nach eurer Experience. Bei Hinzubuchung können die Farben individuell angepasst werden, um sie an das Design der jeweiligen Webseiten anzupassen.
    • Konfigurationen können vorgenommen werden, um die Inhalte und die Anzeige der Widgets entsprechend den Bedürfnissen der Partner zu gestalten.

  3. Technische Anforderungen

    • Die Widgets generieren sich aus einem Script und dem Webcomponent Element. Für die Einbringung ist lediglich die Pflegemöglichkeit von HTML Code notwendig.
    • Es wird auf Sicherheitsprotokolle wie HTTPS geachtet, um eine sichere Datenübertragung zu gewährleisten.

  4. Einfache Bedienbarkeit

    • Der Widget Builder bietet eine intuitive Benutzeroberfläche für die Erstellung von Widgets.
    • Der Link kann dann auch Partner:innen direkt zur Verfügung gestellt werden.

Buchbare Themen

Für den Widget Builder können modular Themen und Module gebucht werden. Themen sind hier die verschiedenen Daten Typen (POI, Events, Touren, etc.) Auch Module, wie ein Chatbot (destination.chatbot), ein Tagesplaner (destination.dayplanner) oder weitere Module können über den Widget Builder als Scripte für Fremdseiten erzeugt werden.

Pflege

Info
Den Link zu deinem Widget Builder erhälst du nach der Beauftragung von deinem jeweiligem Ansprechpartner:in

a) Ergebnislisten
 

1. Widget erstellen und benennen:

  1. Starte im Interface des neuen Widget-Konfigurators.
  2. Gib deinem Widget einen Namen, z.B. "Veranstaltungskalender". Die Widgets können Browserbasiert gespeichert werden.
  3. Wähle im Dropdown "Ergebnisliste" aus.
  4. Belass die Auswahl für den URL-Mod so, wie sie ist.
  5. Klicke auf "Erstellen".

2. Widget konfigurieren (Schritt 1: Daten und Filter festlegen):

  • Meta-Query (Optional):
    Wenn du spezielle Filter benötigst, die nicht in den Standard-Konfigurationen enthalten sind, kannst du eine eigene Meta-Query verwenden. Meistens wirst du jedoch mit den Standard-Optionen gut abgedeckt sein.
  • Datentyp wählen:
    Wähle den gewünschten Datentyp aus, zum Beispiel "Events" für Veranstaltungen.
  • Kategorie filtern:
    Nutze die Suchfunktion, um nach Kategorien zu filtern, die in deiner Experience verfügbar sind.
  • Merkmale filtern:
    Filtere nach spezifischen Merkmalen für die Veranstaltung, z.B. um nur Veranstaltungen mit einem bestimmten Merkmal anzuzeigen.
  • Orte filtern:
    Filtere nach dem gewünschten Ort, z.B. "Bad Nennendorf".
  • Keywords filtern (Optional):
    Du kannst auch nach bestimmten Keywords filtern, falls nötig.
  • Ausgewählte Datensätze anzeigen (Optional):
    Um gezielt einzelne Datensätze anzuzeigen, gib den Datentyp (z.B. "e" für Events), gefolgt von einem Unterstrich und der Global ID des Datensatzes an. Mehrere Datensätze kannst du durch Kommas trennen.
  • Ergebnisliste sortieren:
    Lege eine feste Sortierung fest, zum Beispiel "chronologisch" für Veranstaltungen.
  • Live-Vorschau prüfen: Unten auf der Seite siehst du eine Live-Vorschau deiner Ergebnisse.
  • Klicke auf "Weiter zu Schritt 2".

3. Layout definieren (Schritt 2: Ansicht gestalten):

  • Ergebnisdarstellung wählen:
    Entscheide, ob du die Ergebnisse in "Cards Optik", "Listenansicht" oder "Kompaktansicht" darstellen möchtest. Für Events kann die Kompaktansicht sinnvoll sein, um alle Events untereinander anzuzeigen.
  • Karte initial ausblenden (Optional):
    Du kannst festlegen, dass die Karte initial ausgeblendet wird und beobachten, wie sich die Ansicht direkt ändert.
  • Filterliste ausblenden (Optional):
    Wenn die Seitenbesucher nicht zwischen verschiedenen Ansichten wählen sollen, kannst du die Filterliste ausblenden.
  • Sortierung ausblenden (Optional):
    Du kannst auch die Sortierung ausblenden. In diesem Fall bleibt sie an, um nach chronologischer Reihenfolge oder Entfernung zu sortieren.
  • Klicke auf "Weiter zu Schritt 3".

4. Skript kopieren (Schritt 3: Widget integrieren):

  • In diesem Schritt ist das fertige Skript für dich bereit.
  • Kopiere es über den "Kopieren"-Button oder markiere den gesamten Code manuell und kopiere ihn.

b) Detailansicht

Ein Widget für einen einzelnen Datensatz lässt sich ebenfalls generieren. Wählt dafür im Dropdown die Detailansicht aus.

1. Gewünschten Datentyp auswählen


2. dann muss die Global ID des Datensatzes eingetragen werden. Diese findet man in destination.data mit jeweiligem Datentyp Buchstaben vorne:


p_=POI

t_=Tour

e_=Event

usw.

zB.:  p_100238846


3. Ausgabe der weiteren Infos. Zum Schluss kann man noch definieren, welche Informationen ausgespielt werden sollen und in welcher Reihenfolge.
  • Abschnitte: Logos, Termine, Beschreibung, Anfrage-Formular, Features (Gut zu Wissen), Verwandte Ergebnisse (In der Nähe), KI-Optimiert, Empfehlung und Quell-Inhalt
  • Tags: Highlight, Termine, Kategorien, Status, Besucher

  • Breadcrumb Reihenfolge: PDF Export, Teilen, Merken



  • Feature-Reihenfolge (Gut zu wissen): Diese Infos gibt es individuell, je nach Datentyp und Schema

  • Zusätzliche Sidebar- Adresse: Adresse, Kontaktperson, Veranstalter, Autor, Organisation, Vermittler, Betreiber

    • Related Articles

    • one.pages: Upgrade

      Einführung in die neuen one.pages Bisherige Nutzer der destination.welcome und der destination.pages haben nun die Möglichkeit auf unsere neuen one.pages umzusteigen. Mit dem neuesten Release haben die one.pages sowohl optisch als auch technisch ein ...

    • destination.pages: Hinterlegen von neuem Inhalte für den Infoscreen im Pages Builder

      In destination.one über den Menüpunkt "Content ausspielen" gelangst Du in den Pages Builder. Bitte wähle danach den Menüpunkt "Infoscreen" im Bereich "Aktionen" aus. Dieser Bereich befindet sich auf der linken Seite, unter der Weltkugel: Jetzt kannst ...

    • one.pages: Upgrade auf der Hardware

      Wie die neuen one.pages auf die Hardware kommen Bisherige Nutzer der destination.welcome und der destination.pages haben nun die Möglichkeit auf unsere neuen one.pages umzusteigen. Mit dem neuesten Release haben die one.pages sowohl optisch als auch ...

    • one.pages: Farbeinstellung

      In den neuen one.pages kannst du eine Vielzahl von Farbschemen nutzen, ähnlich wie bei TYPO3. Jedes Farbschema setzt sich aus vier Farbwerten zusammen: Hintergrundfarbe, Schriftfarbe, Linkfarbe und Link-Hover-Farbe. Hier erfährst du, wie du diese ...

    • Hardwaremanagement in destination.data

      Anleitung zur Hardwaremanagement in destination.data Hardwareübersicht: Wenn Du in destination.data auf Tools und anschließend auf den Button Hardwareübersicht klickst, wird Dir die Hardwareliste angezeigt. Das neue Layout zeigt die einzelnen Geräte ...