Nuovi Widget di Instagram Story per Qualsiasi Sito Web: Modelli e Demo

I nostri clienti dicono che i nostri widget di Story sono uno dei loro modi preferiti per coinvolgere i visitatori del sito web.

Molti utenti che vogliono mostrare le loro storie esattamente nello stesso modo di Instagram dicono che i layout EmbedSocial li hanno aiutati a visualizzare con eleganza il contenuto delle storie per rafforzare il messaging del brand con un’esperienza cliente reale, spiega Marija, la nostra Customer Success Manager.

Gli utenti sono davvero senza parole su quanto sia facile configurare il loro widget di Story sui loro siti web utilizzando un codice semplice. Il layout della storia di Instagram può riunire immagini, video e testo in un flusso visivo bello e animato che attira l’attenzione dei clienti subito. Come dicono, porta a un livello completamente nuovo di contenuto personalizzato e si adatta perfettamente a qualsiasi esperienza di sito web ben realizzato, e non hanno nemmeno bisogno di usare strumenti come Adobe Photoshop per ottenere questo. Lo amano semplicemente!

Marija Vlasceva, Customer Success Agent at EmbedSocial

Quindi abbiamo deciso di sorprendere i nostri utenti attuali e futuri e sviluppare una versione migliore, ultra-moderna dei nostri modelli di Story con più capacità di personalizzazione a nostra disposizione.

Abbiamo focalizzato il nostro lavoro sul rinnovamento dei vecchi layout e l’aggiunta di elementi di design più moderni ai nostri widget. L’obiettivo principale era creare widget di story belli e unici che gli utenti amerebbero mostrare e incorporare nei loro siti web.

Inoltre, abbiamo implementato alcuni miglioramenti nel codice, creato la flessibilità per applicare CSS personalizzato da parte di qualsiasi utente, e standardizzato gli elementi complessivi del widget affinché i layout potessero avere una struttura standard.

Nevrie, il nostro sviluppatore, che ha precedentemente lavorato nel team di Customer Success, ha guidato questo progetto.

Abbiamo pensato che fosse la persona giusta a capo di questo rinnovamento di modelli di storie perché capisce completamente come pensano i clienti e cosa cercano nei widget di Story. E avevamo ragione.

Si è rivelato un brainstorming davvero veritiero quando combini le opinioni di una UX designer e uno sviluppatore front-end.

La battaglia era migliorare i vecchi layout vs creare interamente nuovi

Non potevano essere soddisfatti per meno, quindi hanno raggiunto un compromesso per creare 10 nuovi layout DA ZERO:

• 5 layout per widget di Storie
• 5 layout per widget di Gallery Story

Game on! I widget sono disponibili ora e in tutti i piani di prezzo a pagamento.

Il processo di design di un nuovo widget di storie

È stato un lungo mese di lavoro su questa trasformazione.

Il rinnovamento è stato diviso in pochi semplici passaggi:

1. Angela, la nostra UX designer, sta facendo il design grafico per le diverse opzioni di modelli
2. Nevrie sta fornendo feedback, rispondendo alla seguente domanda: I gli utenti saranno attivati a fare clic su questo?
3. Angela sta implementando il feedback
4. In base al design finale, Nevrie sta creando i widget

Sebbene questo processo ha funzionato come un incantesimo, la sfida rimasta: assicurandosi che il widget sembrasse grande su tutti i dispositivi.

Nelle parole di Nevrie:

Era critico lavorare su un widget che sarà incorporato su un sito web di qualcuno perché non puoi sapere in anticipo, quale sarà il brand che utilizzerà quel widget. Non puoi sapere come apparirà sul loro dispositivo mobile o su diversi computer desktop. Dopotutto, dovevamo assicurarci che il widget sembrasse agevole indipendentemente dal dispositivo che usi.

Dopo un mese, Nevrie dice che è felicissima dell’risultato e è sicura che gli utenti lo ADORERANNO!

E possiamo vedere perché.

Dai un’occhiata al risultato finale - in azione, qui sotto!

Nuovi Widget di Single Story

Di seguito è una vetrina dei nuovi widget di single-story. Questi widget mostreranno la tua ultima storia e le sue diapositive in layout moderni come: Carousel, Swiper, Slider, Popover e Highlight. Ecco i dettagli per ogni uno di questi nuovi modelli:

Widget Carousel

Utilizzo: Perfetto per pagine di prodotti dedicate o homepages

Caratteristiche:

• Display reattivo e completo dei diapositive della storia
• Seleziona le Storie che vuoi mostrare
• Trascinare e rilasciare per riordinare l’aspetto della Story
• Opzioni di ordinamento dei media
• Formato AMP Story
• Visualizza Storie in Lightbox
• Aggiungi un pulsante CTA a ogni media story o a tutti loro
• Usa Bookend alla fine del widget
• Mostra il titolo del widget e la navigazione
• Auto-sincronizzazione di nuove immagini o video
• Cambia il layout, il font, il colore e il titolo del widget
• Editor CSS personalizzato
• Mostra widget dopo che la storia scade

Widget Swiper

Utilizzo: Layout moderno che sembra fantastico su homepages o landing pages

Caratteristiche:

• Esperienza reattiva “come Instagram” swipe-up
• Seleziona le Storie che vuoi mostrare
• Trascinare e rilasciare per riordinare l’aspetto delle Storie
• Opzioni di ordinamento dei media
• Formato AMP Story
• Aggiungi un pulsante CTA a ogni media story o a tutti loro
• Usa Bookend alla fine del widget
• Mostra il titolo del widget e la navigazione
• Auto-sincronizzazione di nuove immagini o video
• Cambia il layout, il font, il colore e il titolo del widget
• Editor CSS personalizzato
• Mostra widget dopo che la storia scade

Widget Slider

Utilizzo: Funziona bene per barre laterali o contenuti di blog

Caratteristiche:

• Esperienza reattiva “come Instagram” swipe-up
• Seleziona le Storie che vuoi mostrare
• Trascinare e rilasciare per riordinare l’aspetto della Story
• Opzioni di ordinamento dei media
• Formato AMP Story
• Aggiungi un pulsante CTA a ogni media story o a tutti loro
• Usa Bookend alla fine del widget
• Mostra il titolo del widget e la navigazione
• Auto-sincronizzazione di nuove immagini o video
• Cambia il layout, il font, il colore e il titolo del widget
• Editor CSS personalizzato
• Mostra widget dopo che la storia scade

Widget Popover

Utilizzo: Applicabile a tutte le pagine web - solitamente utilizzato per incorporare il codice nel footer e avere la storia più recente mostrata su tutte le pagine in un banner flottante fisso

Caratteristiche:

• Widget di Story flottante che, quando cliccato, fornisce l’esperienza di scorrimento di social media familiare
• Seleziona le Storie che vuoi mostrare
• Trascinare e rilasciare per riordinare l’aspetto della Story
• Opzioni di ordinamento dei media
• Formato AMP Story
• Aggiungi un pulsante CTA a ogni media story o a tutti loro
• Usa Bookend alla fine del widget
• Mostra il titolo del widget e la navigazione
• Cambia la posizione e il timeout del popup
• Auto-sincronizzazione di nuove immagini o video
• Cambia il layout, il font, il colore e il titolo del widget
• Editor CSS personalizzato
• Mostra widget dopo che la storia scade

Demo:

Widget Highlight

Utilizzo: Simile a Popover, questo layout può essere utilizzato in Sidebars, pagine di prodotti specifiche, dentro descrizioni o altri posizionamenti innovativi dove gli utenti avranno bisogno di una versione più piccola della Story che si attiva a schermo intero quando cliccato

Caratteristiche:

• Widget di Story flottante che quando cliccato, fornisce l’esperienza di scorrimento di social media familiare
• Seleziona le Storie che vuoi mostrare
• Trascinare e rilasciare per riordinare l’aspetto della Story
• Opzioni di ordinamento dei media
• Formato AMP Story
• Aggiungi un pulsante CTA a ogni media story o a tutti loro
• Usa Bookend alla fine del widget
• Mostra il titolo del widget e la navigazione
• Cambia la posizione e il timeout del popup
• Auto-sincronizzazione di nuove immagini o video
• Cambia il layout, il font, il colore e il titolo del widget
• Editor CSS personalizzato
• Mostra widget dopo che la storia scade

Per un’occhiata più approfondita ai widget di single-story, clicca il link qui sotto per live demos:

Demos: Widget di Single Story →

Nuovi Widget di Gallery

La piattaforma EmbedSocial consente di combinare storie da diverse date e creare un widget come una galleria che mostrerà più storie. Per lo stile dell’aspetto dei widget, di seguito sono i nuovi modelli che puoi scegliere:

Slider Gallery

Utilizzo: Mostra esempi pratici o contenuti generati dagli utenti per contenuti di blog o in barre laterali

Caratteristiche:

• Esperienza slideshow reattiva di prossimo livello
• Imposta un pulsante Call to Action a ogni uno di loro o a tutti i media story nella galleria
• Seleziona manualmente le storie che vuoi mostrare nella galleria
• Seleziona le storie e l’ordine dei media
• Opzione di autoplay dei thumbs, dello slider e dei video
• Opzione di mostrare paginazione, navigazione, data e nome utente
• Cambia il layout dello slider, il titolo, la dimensione, il font o il colore
• Editor CSS personalizzato

Highlights Gallery

Utilizzo: Funziona meglio per le pagine di prodotti o in barre laterali quando gli utenti hanno bisogno di un widget di Story più piccolo che, una volta cliccato, si apre a schermo intero

Caratteristiche:

• Esperienza reattiva di highlights come Instagram
• Imposta un pulsante Call to Action a ogni uno di loro o a tutti i media story nella galleria
• Seleziona manualmente le storie che vuoi mostrare nella galleria
• Seleziona il numero di miniature
• Opzione di autoplay della lightbox, dei thumbs, dello slider e dei video
• Opzione di mostrare paginazione, navigazione, data, immagine di origine e nome utente
• Cambia il layout dello slider, il titolo, la dimensione, il font o il colore
• Editor CSS personalizzato

List Gallery

Utilizzo: Simile agli Highlights, funziona meglio per upsell e cross-sell su pagine di prodotti o per mostrare contenuti generati dagli utenti

Caratteristiche:

• Esperienza reattiva di highlights come Instagram (verticale)
• Imposta un pulsante Call to Action a ogni uno di loro o a tutti i media story nella galleria
• Seleziona manualmente le storie che vuoi mostrare nella galleria
• Seleziona il numero di miniature
• Opzione di autoplay dei thumbs, della lightbox e dei video
• Opzione di mostrare paginazione, navigazione, data e nome utente
• Cambia il layout dello slider, il titolo, la dimensione, il font o il colore
• Editor CSS personalizzato

Swiper Gallery

Utilizzo: Layout moderno per homepages o landing pages visivamente accattivanti

Caratteristiche:

• Esperienza reattiva dello slider
• Imposta un pulsante Call to Action a ogni uno di loro o a tutti i media story nella galleria
• Seleziona manualmente le storie che vuoi mostrare nella galleria
• Opzione di autoplay dei thumbs, della lightbox e dei video
• Opzione di mostrare paginazione, navigazione, data, immagine di origine e nome utente
• Cambia il layout dello slider, il titolo, la dimensione, il font o il colore
• Editor CSS personalizzato

Carousel Gallery

Utilizzo: Funziona bene su homepages e pagine di prodotti dedicate

Caratteristiche:

• Esperienza reattiva dello slider
• Imposta un pulsante Call to Action a ogni uno di loro o a tutti i media story nella galleria
• Seleziona manualmente le storie che vuoi mostrare nella galleria
• Opzione di autoplay dei thumbs, della lightbox e dei video
• Opzione di mostrare paginazione, navigazione, data, immagine di origine e nome utente
• Cambia il layout dello slider, il titolo, la dimensione, il font o il colore
• Editor CSS personalizzato

Come puoi vedere, sono pronti per partire.

Questo significa solo una cosa: è il momento dell’azione! Dai un’occhiata alle demo qui sotto di tutti i Gallery Templates per le tue Storie.

Demos: Template di Storie Gallery →

Applicabilità dei Nuovi Widget

Come puoi vedere, ogni modello di story ha la sua propria applicabilità unica. Sta a te decidere quale design si adatta meglio all’interfaccia del tuo sito web.

Ecco alcuni suggerimenti che potresti considerare:

Home Page

Le Instagram stories sono contenuti perfetti per le homepages. È uno dei format più recenti che porterà il tuo design web a uno stadio molto più coinvolgente, dando ai visitatori web componenti uniche con cui coinvolgersi.

Product Page

Un grande esempio di utilizzo del widget story con un modello Popover. Questo widget flottante mostrerà i contenuti del prodotto in un layout story che dà ai clienti un modo fresco e unico di coinvolgersi e possibilmente acquistare.

Landing Page

In questo esempio, mostriamo il widget di Highlights gallery incorporato su una pagina di Categoria. È una vetrina di story di prodotto che gli utenti che visitano questa pagina possono facilmente sfogliare e coinvolgersi in un formato più immersivo. Ciò può risultare in una maggiore possibilità di fare clic sulla opzione di call to action e acquistare il prodotto.

Se stai già immaginando i widget sul tuo sito web, scorri verso il basso per scoprire come puoi iniziare.

Si prega di notare che la piattaforma EmbedSocial è sempre aggiornata con gli ultimi cambiamenti dell’API di Instagram. Ciò significa che gli utenti possono continuare a usare Instagram per generare e visualizzare feed di Instagram e storie sui loro siti web.

Per iniziare con i nuovi modelli

I nuovi modelli sono già disponibili per tutti gli utenti di EmbedSocial. Per applicarli e incorporarli sul tuo sito web proprio ora, segui i passaggi qui sotto:

1. Accedi al tuo account EmbedSocial
2. Collega l’account Facebook collegato con il profilo Instagram per generare le storie (se non hai ancora creato un widget)
3. Vai a Widgets, scegli il profilo Instagram e fai clic su ‘Crea widget.’
4. Nella vista di modifica, vai all’opzione Layout & Design per personalizzare il tuo widget
5. Nell’impostazione ‘Layouts’ sono tutti i modelli dove puoi selezionare il modello di story che si adatta meglio a te
6. Copia il codice HTML dall’angolo in alto a destra e incollalo nella sezione body del tuo sito web

Ecco una screenshot, dove puoi trovare i nuovi widget - Apri il toggle ‘Layout and Design’ nel pannello Impostazioni, e in ‘Layouts’, scegli il nuovo modello dal dropdown. I cambiamenti appariranno immediatamente nella sezione ‘Preview’ a sinistra. Per applicare i cambiamenti a un widget già incorporato, fai semplicemente clic su ‘Save’.

Ripeti gli stessi passaggi per i Gallery Widgets, con una sola eccezione - invece di Widgets, vai al menu Gallery dal menu principale sinistro.

Ecco un tutorial dettagliato passo-passo con screenshot su come incorporare Instagram Stories sul tuo sito web oggi.

Si prega di notare che EmbedSocial è la prima piattaforma che ha la funzionalità per generare le storie di Instagram. Tutti i nuovi widget funzionano perfettamente in qualsiasi app basata su web che supporti l’incorporamento di JavaScript o iframe, piattaforme di ecommerce o qualsiasi web builder, come WordPress.

Prossimamente…

Non abbiamo ancora finito.

Dai un’occhiata in anteprima a cosa c’è prossimo nella nostra roadmap per il nostro strumento EmbedSocial all-in-one:

• Funzionalità migliorata nelle funzioni di caricamento
• Moderazione migliore che porterà la flessibilità per combinare storie da varie fonti in un widget
• Nuovi widget di Highlights

Ci piacerebbe sentire i tuoi suggerimenti per migliorare ulteriormente i nostri widget, sentiti libero di contattarci.

Nel frattempo, buon embedding!