Eines der Hauptziele von own.tiles ist es, die Integration von Widgets in jede Website oder jedes Bearbeitungstool so einfach wie möglich zu gestalten – selbst für Personen ohne Programmierkenntnisse. Während die Grundlagen unseres Frameworks für die Erstellung solcher Widgets bereits entwickelt wurden, lag unser Fokus in den letzten Monaten auf der own.tiles Embed API und der dazugehörigen Bibliothek. Diese API dient als Schnittstelle, über die konfigurierte own.tiles problemlos in andere Plattformen eingebunden werden können.

Landing Page und Konfigurator

Unser größter Erfolg in den letzten Monaten war die Veröffentlichung der Landing Page https://tiles.own.page. 

Diese Seite fungiert sowohl als Bibliothek für alle verfügbaren Widgets als auch als Konfigurator, mit dem Nutzer:innen das Aussehen sowie die Funktionalität von own.tiles ändern und anpassen können.  

Own.tiles Embed API und Bibliothek

Eine wesentliche Grundlage für die Integration von Widgets in verschiedene Plattformen ist die Nutzung von Iframes. Iframes sind das kleinste gemeinsame Primitiv, das alle Website-Builder, Web-Bearbeitungstools und andere Editoren unterstützen. Genau deshalb basiert unsere Lösung auf Iframes, jedoch auf eine anpassbare und benutzerfreundliche Weise.

• Einfache Suche: Die Seite tiles.own.page dient in erster Linie als digitale Bibliothek, in der Nutzer:innen nach own.tiles suchen können, die bereits von Entwickler:innen implementierten wurden.

   

• Einfache Konfiguration: Nutzer:innen können mithilfe des Web-UIs von tiles.own.page die Widgets ganz einfach konfigurieren. Dazu gehört die Anpassung vom Aussehen und Parametern wie Datenfeldern oder Farben.

   

• Einfaches Einbinden: Nach der Konfiguration steht dem Nutzer entweder ein iframe-Link (URL) oder der Embed-Code (HTML) zur Verfügung. Dieser Code kann problemlos in Plattformen wie Webflow, WordPress, tldraw oder sogar Notion eingebettet werden.

  

Beispiel: Integration von own.tiles in Notion

Nach der Konfiguration der gewünschten Felder kann das eigene own.tile kinderleicht in verschiedene Plattformen integriert werden. Dazu wählt der Nutzer einfach den iframe-Link oder den Embed-Code aus und fügt diesen in die gewünschte Plattform ein. Ein Beispiel für die Integration in Notion:

• URL:

  https://tiles.own.page/widgets/github?showUsername=true&username=elitza-vasileva&color=github   

• IFrame:  

  <iframe src="https://tiles.own.page/widgets/github?showUsername=true&username=elitza-vasileva&color=github" width="100%" height="100%"></iframe>

   

Die einfache Integration von own.tiles passt auch perfekt zu unserem Ansatz mit own.page, wie in früheren Blogbeiträgen beschrieben. Dies unterstreicht, dass own.tiles in jeder Website, jedem Website-Builder oder jedem Bearbeitungstool verwendet werden kann – inklusive unserer Plattform own.page.

Nächste Schritte

Unsere kommenden Aufgaben umfassen das Finetuning und weitere Verbesserungen des Frameworks und der Embed API. Ein Schwerpunkt wird zudem auf der Erstellung von Figma-Templates mit verschiedenen Widget-Dimensionen liegen. Diese Vorlagen sollen es Designer:innen und Entwicklern:innen ermöglichen, in wenigen Minuten das Layout eines Widgets zu entwerfen und anzupassen.