Neue Instagram Story Widgets für beliebige Websites: Templates und Demos

Unsere Kunden sagen, dass unsere Story Widgets eine ihrer Lieblings-Möglichkeiten sind, Website-Besucher zu engagieren.

Viele Benutzer, die ihre Stories genauso anzeigen möchten wie Instagram, sagen, dass EmbedSocial Layouts ihnen geholfen haben, Story-Inhalte elegant zu präsentieren, um Brand-Messaging mit echter Kundenerfahrung zu verstärken. Das erklärt Marija, unsere Customer Success Manager.

Benutzer sind wirklich sprachlos, wie einfach es ist, ihr Story Widget mit einfachem Code auf ihren Websites einzurichten. Das Instagram Story Layout kann Bilder, Video und Text in einem schönen und animierten visuellen Fluss kombinieren, der die Aufmerksamkeit der Kunden sofort zieht. Wie sie sagen, bringt es ein völlig neues Level von benutzerdefinierten Inhalten und passt perfekt in jedes gut gestaltete Website-Erlebnis, und sie müssen nicht einmal Tools wie Adobe Photoshop verwenden, um das zu erreichen. Sie lieben es einfach!

Marija Vlasceva, Customer Success Agent bei EmbedSocial

Also haben wir entschieden, unsere aktuellen und zukünftigen Benutzer zu überraschen und eine bessere, ultramoderne Version unserer Story Templates mit mehr Anpassungsmöglichkeiten zu entwickeln.

Wir konzentrierten uns darauf, die alten Layouts zu erneuern und mehr moderne Designelemente zu unseren Widgets hinzuzufügen. Das Hauptziel war, schöne und einzigartige Story Widgets zu erstellen, die Benutzer gerne auf ihren Websites anzeigen und einbetten möchten.

Zusätzlich implementierten wir einige Verbesserungen in den Code, schafften Flexibilität, um benutzerdefiniertes CSS von jedem Benutzer zu verwenden, und standardisierten die gesamten Widget-Elemente, damit die Layouts eine standardisierte Struktur haben können.

Nevrie, unser Entwickler, der zuvor im Customer Success Team arbeitete, führte dieses Projekt. Wir dachten, dass sie die richtige Person war, um diese Story-Template-Überholung zu leiten, weil sie vollständig versteht, wie Kunden denken und was sie in Story Widgets suchen. Und wir hatten recht.

Es stellte sich heraus, dass es ein wirklich ehrlicher Brainstorm war, wenn du die Meinungen eines UX-Designers und Front-End-Entwicklers kombinierst.

Der Kampf war die Verbesserung der alten Layouts im Vergleich zur Erstellung völlig neuer Layouts

Sie konnten sich nicht mit weniger zufrieden geben, also machten sie einen Kompromiss, um 10 neue Widget-Layouts VON GRUND AUF zu erstellen:

• 5 Layouts für Story Widgets
• 5 Layouts für Gallery Story Widgets

Spielstart! Die Widgets sind jetzt verfügbar und in allen bezahlten Preisplänen.

Der Designprozess eines neuen Story Widgets

Es war ein langer Monat für diese Transformation.

Die Überholung wurde in ein paar einfache Schritte unterteilt:

1. Angela, unsere UX-Designerin, erstellt das grafische Design für verschiedene Template-Optionen
2. Nevrie gibt Feedback und beantwortet die folgende Frage: Werden Benutzer dazu gebracht, darauf zu klicken?
3. Angela implementiert das Feedback
4. Basierend auf dem Entwurfsdesign erstellt Nevrie die Widgets

Obwohl dieser Prozess wie ein Charme funktionierte, blieb die Herausforderung: sicherzustellen, dass das Widget auf allen Geräten großartig aussieht.

In Nevries Worten:

Es war entscheidend, an einem Widget zu arbeiten, das auf der Website von jemandem eingebettet wird, weil man nicht vorher wissen kann, welche Marke dieses Widget verwenden wird. Du kannst nicht wissen, wie es auf ihrem Mobilgerät oder verschiedenen Desktop-Computern aussieht. Schließlich mussten wir sicherstellen, dass das Widget unabhängig davon, welches Gerät du verwendest, reibungslos aussieht.

Nach einem Monat sagt Nevrie, dass sie begeistert vom Ergebnis ist, und sie ist sicher, dass die Benutzer es LIEBEN!

Und wir können sehen, warum.

Schaue dir das endgültige Ergebnis unten in Aktion an!

Neue Single Story Widgets

Unten ist eine Anzeige der neuen Single-Story Widgets. Diese Widgets zeigen deine neueste Story und ihre Folien in modernen Layouts wie: Karussell, Wischer, Schieber, Popover und Highlight. Hier sind die Details für jede dieser neuen Templates:

Karussell Widget

Verwendung: Perfekt für dedizierte Produktseiten oder Homepages

Charakteristiken:

• Responsiv, vollständige Anzeige der Story-Folien
• Wähle die Stories aus, die du anzeigen möchtest
• Drag und Drop zum Neuordnen der Story-Anzeige
• Medien-Reihenfolgen-Optionen
• AMP Story-Format
• Betrachte Stories in Lightbox
• Füge eine CTA-Schaltfläche zu jedem Story-Medium oder all hinzu
• Verwende Bookend am Ende des Widgets
• Zeige Widget-Titel und Navigation
• Auto-Sync neue Bilder oder Videos
• Ändere das Layout, Schrift, Farbe und Widget-Titel
• Benutzerdefinierter CSS-Editor
• Zeige Widget nach Ablauf der Story

Wischer Widget

Verwendung: Modernes Layout, das auf Homepages oder Landing Pages großartig aussieht

Charakteristiken:

• Responsives “Instagram-ähnliches” Wisch-Erlebnis
• Wähle die Stories aus, die du anzeigen möchtest
• Drag und Drop zum Neuordnen der Stories-Anzeige
• Medien-Reihenfolgen-Optionen
• AMP Story-Format
• Füge eine CTA-Schaltfläche zu jedem Story-Medium oder all hinzu
• Verwende Bookend am Ende des Widgets
• Zeige Widget-Titel und Navigation
• Auto-Sync neue Bilder oder Videos
• Ändere das Layout, Schrift, Farbe und Widget-Titel
• Benutzerdefinierter CSS-Editor
• Zeige Widget nach Ablauf der Story

Schieber Widget

Verwendung: Funktioniert großartig für Sidebars oder Blog-Inhalte

Charakteristiken:

• Responsives “Instagram-ähnliches” Wisch-Erlebnis
• Wähle die Stories aus, die du anzeigen möchtest
• Drag und Drop zum Neuordnen der Story-Anzeige
• Medien-Reihenfolgen-Optionen
• AMP Story-Format
• Füge eine CTA-Schaltfläche zu jedem Story-Medium oder all hinzu
• Verwende Bookend am Ende des Widgets
• Zeige Widget-Titel und Navigation
• Auto-Sync neue Bilder oder Videos
• Ändere das Layout, Schrift, Farbe und Widget-Titel
• Benutzerdefinierter CSS-Editor
• Zeige Widget nach Ablauf der Story

Popover Widget

Verwendung: Anwendbar auf allen Webseiten - normalerweise verwendet, um den Code in der Fußzeile einzubetten und die neueste Story auf allen Seiten in einem festen schwebenden Banner anzuzeigen

Charakteristiken:

• Schwebendes Story Widget, das beim Klicken das vertraute Social-Media-Wisch-Erlebnis bietet
• Wähle die Stories aus, die du anzeigen möchtest
• Drag und Drop zum Neuordnen der Story-Anzeige
• Medien-Reihenfolgen-Optionen
• AMP Story-Format
• Füge eine CTA-Schaltfläche zu jedem Story-Medium oder all hinzu
• Verwende Bookend am Ende des Widgets
• Zeige Widget-Titel und Navigation
• Ändere die Popup-Position und das Timeout
• Auto-Sync neue Bilder oder Videos
• Ändere das Layout, Schrift, Farbe und Widget-Titel
• Benutzerdefinierter CSS-Editor
• Zeige Widget nach Ablauf der Story

Demo:

Highlight Widget

Verwendung: Ähnlich wie Popover kann dieses Layout in Sidebars, speziellen Produktseiten, innerhalb von Beschreibungen oder an anderen innovativen Orten verwendet werden, an denen Benutzer eine kleinere Version der Story benötigen, die beim Klick in Vollbild aktiviert wird

Charakteristiken:

• Schwebendes Story Widget, das beim Klick das vertraute Social-Media-Wisch-Erlebnis bietet
• Wähle die Stories aus, die du anzeigen möchtest
• Drag und Drop zum Neuordnen der Story-Anzeige
• Medien-Reihenfolgen-Optionen
• AMP Story-Format
• Füge eine CTA-Schaltfläche zu jedem Story-Medium oder all hinzu
• Verwende Bookend am Ende des Widgets
• Zeige Widget-Titel und Navigation
• Ändere die Popup-Position und das Timeout
• Auto-Sync neue Bilder oder Videos
• Ändere das Layout, Schrift, Farbe und Widget-Titel
• Benutzerdefinierter CSS-Editor
• Zeige Widget nach Ablauf der Story

Um einen tieferen Blick auf die Single-Story Widgets zu werfen, klick auf den untenstehenden Link für Live-Demos:

Demos: Single Story Widgets →

Neue Gallery Widgets

Die EmbedSocial-Plattform ermöglicht die Kombination von Stories aus verschiedenen Daten und die Erstellung eines Widgets als Galerie, die mehrere Stories präsentiert. Um den Aussehen der Widgets zu gestalten, hier sind die neuen Templates, aus denen du wählen kannst:

Slider-Galerie

Verwendung: Zeige praktische Beispiele oder nutzergeneriert Inhalte für Blog-Inhalte oder in Sidebars

Charakteristiken:

• Responsives Slideshow-Erlebnis auf nächstem Level
• Setze eine Call-to-Action-Schaltfläche zu jedem oder allen Story-Medien in der Galerie
• Wähle manuell die Stories aus, die du in der Galerie anzeigen möchtest
• Wähle die Stories und Medien-Reihenfolge
• Optionen zum Autoplay-Miniaturen, Schieber und Videos
• Option zum Anzeigen von Paginierung, Navigation, Datum und Benutzername
• Ändere das Schieber-Layout, Titel, Größe, Schrift oder Farbe
• Benutzerdefinierter CSS-Editor

Highlights-Galerie

Verwendung: Funktioniert am besten für Produktseiten oder in Sidebars, wenn Benutzer ein kleineres Story-Widget benötigen, das einmal angeklickt in Vollbild öffnet

Charakteristiken:

• Responsives Instagram-ähnliches Highlights-Erlebnis
• Setze eine Call-to-Action-Schaltfläche zu jedem oder allen Story-Medien in der Galerie
• Wähle manuell die Stories aus, die du in der Galerie anzeigen möchtest
• Wähle die Anzahl der Miniaturen
• Optionen zum Autoplay Lightbox, Miniaturen, Schieber und Videos
• Option zum Anzeigen von Paginierung, Navigation, Datum, Quellbild und Benutzername
• Ändere das Schieber-Layout, Titel, Größe, Schrift oder Farbe
• Benutzerdefinierter CSS-Editor

Listen-Galerie

Verwendung: Ähnlich wie Highlights funktioniert es am besten zum Upselling und Cross-Selling auf Produktseiten oder zum Anzeigen von nutzergeneriert Inhalten

Charakteristiken:

• Responsives Instagram-ähnliches Highlights-Erlebnis (vertikal)
• Setze eine Call-to-Action-Schaltfläche zu jedem oder allen Story-Medien in der Galerie
• Wähle manuell die Stories aus, die du in der Galerie anzeigen möchtest
• Wähle die Anzahl der Miniaturen
• Optionen zum Autoplay Miniaturen, Lightbox und Videos
• Option zum Anzeigen von Paginierung, Navigation, Datum und Benutzername
• Ändere das Schieber-Layout, Titel, Größe, Schrift oder Farbe
• Benutzerdefinierter CSS-Editor

Wischer-Galerie

Verwendung: Modernes Layout für visuell ansprechende Homepages oder Landing Pages

Charakteristiken:

• Responsives Schieber-Erlebnis
• Setze eine Call-to-Action-Schaltfläche zu jedem oder allen Story-Medien in der Galerie
• Wähle manuell die Stories aus, die du in der Galerie anzeigen möchtest
• Optionen zum Autoplay Miniaturen, Lightbox und Videos
• Option zum Anzeigen von Paginierung, Navigation, Datum, Quellbild und Benutzername
• Ändere das Schieber-Layout, Titel, Größe, Schrift oder Farbe
• Benutzerdefinierter CSS-Editor

Karussell-Galerie

Verwendung: Funktioniert großartig auf Homepages und dedizierten Produktseiten

Charakteristiken:

• Responsives Schieber-Erlebnis
• Setze eine Call-to-Action-Schaltfläche zu jedem oder allen Story-Medien in der Galerie
• Wähle manuell die Stories aus, die du in der Galerie anzeigen möchtest
• Optionen zum Autoplay Miniaturen, Lightbox und Videos
• Option zum Anzeigen von Paginierung, Navigation, Datum, Quellbild und Benutzername
• Ändere das Schieber-Layout, Titel, Größe, Schrift oder Farbe
• Benutzerdefinierter CSS-Editor

Wie du sehen kannst, sind sie einsatzbereit.

Das bedeutet nur eines: Es ist Zeit zum Handeln! Schaue dir unten die Demos aller Gallery Templates für deine Stories an.

Demos: Stories Gallery Templates →

Neue Widgets Anwendbarkeit

Wie du sehen kannst, hat jedes Story-Template seine eigene einzigartige Anwendbarkeit. Es bleibt dir überlassen, zu entscheiden, welches Design am besten zu deiner Website-Schnittstelle passt.

Hier sind einige Vorschläge, die du in Betracht ziehen könntest:

Startseite

Instagram Stories sind perfekte Inhalte für Startseiten. Es ist eines der neuesten Formate, das dein Web-Design auf eine viel ansprechendere und modernere Stufe bringt und Web-Besucher mehr einzigartige Komponenten zum Engagieren bietet.

Produktseite

Ein großartiges Beispiel für die Verwendung des Story Widgets mit einem Popover-Template. Dieses schwebende Widget präsentiert Inhalte über das Produkt in einem Story-Layout, das Kunden eine frische und einzigartige Möglichkeit zum Engagieren und möglicherweise Kaufen bietet.

Landing Page

In diesem Beispiel zeigen wir das Highlights-Gallery-Widget, das auf einer Kategorieseite eingebettet ist. Es ist eine Anzeige von Produkt-Stories, die Benutzer, die diese Seite besuchen, leicht durchsuchen und in einem immersiveren Format engagieren können. Dies kann zu einer höheren Wahrscheinlichkeit führen, die Call-to-Action-Optionen zu klicken und das Produkt zu kaufen.

Wenn du bereits die Widgets auf deiner Website abbildest, scrollen nach unten, um zu erfahren, wie du anfangen kannst.

Bitte beachte, dass die EmbedSocial-Plattform immer auf dem Laufenden mit den neuesten Instagram API-Änderungen ist. Das bedeutet, dass Benutzer weiterhin Instagram verwenden können, um Instagram Feeds und Stories auf ihren Websites zu generieren und anzuzeigen.

Erste Schritte mit den neuen Templates

Die neuen Templates sind bereits für alle EmbedSocial-Benutzer verfügbar. Um sie jetzt anzuwenden und auf deiner Website einzubetten, befolge die unten aufgeführten Schritte:

1. Melde dich bei deinem EmbedSocial-Konto an
2. Verbinde das Facebook-Konto, das mit dem Instagram-Profil verknüpft ist, um die Stories zu generieren (wenn du noch kein Widget erstellt hast)
3. Gehe zu Widgets, wähle das Instagram-Profil aus und klicke auf “Widget erstellen”.
4. Navigiere in der Bearbeitungsansicht zur Option “Layout und Design”, um dein Widget anzupassen
5. In der “Layouts” Einstellung sind alle Templates, in denen du die Story-Vorlage auswählen kannst, die am besten zu dir passt
6. Kopiere den HTML-Code von oben rechts und füge ihn in deinen Website-Body-Abschnitt ein

Hier ist ein Screenshot, wo du die neuen Widgets findest. Öffne den “Layout und Design” Umschalter in der Einstellungsleiste, und in “Layouts”, wähle die neue Vorlage aus dem Dropdown. Die Änderungen werden sofort im linken “Vorschau” Bereich angezeigt. Um die Änderungen auf ein bereits eingebettetes Widget anzuwenden, klick einfach auf “Speichern”.

Wiederhole die gleichen Schritte für die Gallery Widgets, mit nur einer Ausnahme. Gehe statt zu Widgets zum Gallery Menü des linken Hauptmenüs.

Hier ist ein detailliertes Schritt-für-Schritt-Tutorial mit Screenshots, wie du heute Instagram Stories auf deiner Website einbettest.

Bitte beachte, dass EmbedSocial die erste Plattform ist, die die Funktionalität hat, Instagram Stories zu generieren. Alle neuen Widgets funktionieren nahtlos in jeder webgestützten App, die JavaScript- oder iframe-Einbettung unterstützt, eCommerce-Plattformen oder jeden Web-Builder, wie WordPress.

Kommt noch…

Wir sind noch nicht fertig.

Werfe einen schnellen Blick auf das, was nächstes auf unserer Roadmap für unser All-in-One EmbedSocial Tool kommt:

• Verbesserte Funktionalität in den Upload-Funktionen
• Bessere Moderation, die Flexibilität bringt, Stories aus verschiedenen Quellen in einem Widget zu kombinieren
• Neue Highlights Widgets

Wir würden gerne deine Vorschläge zur weiteren Verbesserung unserer Widgets hören, also zögere nicht, uns eine Nachricht zu schreiben.

Bis dahin frohes Einbetten!