In un post di quest’anno, ti abbiamo mostrato come utilizzare i video sul tuo sito Squarespace più facilmente – come video di sfondo o clip incorporate.

Nel post di oggi ti mostreremo il modo migliore pe raccogliere video dagli utenti e visitatori del tuo sito web incorporando un videoregistratore e un widget di upload direttamente sul tuo sito.

Lo faremo con l’aiuto della camera API HTML5 di Clipchamp: uno strumento di acquisizione video che può essere utilizzato su qualsiasi tipo di sito, ad esempio per raccogliere testimonianze video dai clienti se gestisci un negozio online, per accettare l’invio di video per le competizioni o per ricevere commenti video dai lettori del tuo blog.

Seguendo il nostro tutorial, lo troverai semplice da installare sul tuo sito Squarespace senza alcun tipo di conoscenza.

Creare e aggiungere un videoregistratore Squarespace

Potrai decidere se i tuoi visitatori devono registrare con la webcam direttamente sul tuo sito, selezionare e caricare video che hanno già sul loro dispositivo, oppure puoi anche dare loro entrambe le opzioni in modo che possano scegliere quella che preferiscono.
Grazie alla tecnologia esclusiva che abbiamo creato, tutti i file video vengono inviati direttamente dai dispositivi dei tuoi utenti a un target selezionato di archiviazione cloud senza passare attraverso la nostra infrastruttura. Questo aiuterà a proteggere la tua privacy e quella dei tuoi visitatori.

 

squarespace-video-recorder

 

Per quanto riguarda il target di upload, i video possono essere inviati al tuo account YouTube, Dropbox, Google Drive, Amazon S3 o Microsoft Azure.

Per poter visualizzare i clip sul tuo sito Web dopo che le persone li hanno caricati, inviarli su YouTube è più sensato in quanto puoi incorporarli da lì attraverso le schermate admin di Squarespace.

E ora, ecco i passaggi per installare il videoregistratore di Squarespace:

1) Accedi nell’interfaccia admin del tuo sito

Questo è necessario in quanto è necessario creare una nuova pagina di esempio in un passaggio successivo e copiare del codice nel codice HTML di questa pagina.

Squarespace login

 

2) In una seconda scheda del browser, registrati per una prova gratuita dell’API di video Clipchamp

La registrazione per un account di prova della nostra API è necessaria per ottenere la tua chiave API unica, che ti servirà in un passaggio successivo e per abilitare un target di upload per i video che riceverai. Non hai bisogno di una carta di credito per registrarti e puoi annullare la prova in qualsiasi momento.

register-clipchamp-trial

 

3) Imposta YouTube come target di upload per l’invio di video utente

Dopo aver aperto un account di prova, nelle impostazioni API su https://util.clipchamp.com/it/api-setup/integrations, clicca su YouTube e connetti l’API di Clipchamp al tuo account YouTube in modo che i video inviati dagli utenti possano essere caricati sul tuo canale o su una playlist specifica.

 

set-youtube-uploads

 

4) Dopo, vai su https://util.clipchamp.com/it/api-setup/install

In questa pagina sono presenti 2 frammenti di codice: è necessario copiare entrambi i frammenti in Squarespace (passaggi 5 e 6 di seguito) per incorporare il registratore webcam e l’uploader sul sito. Puoi ignorare le istruzioni menzionate nella pagina stessa poiché si applicano ai siti non di Squarespace.

 

clipchamp-api-code

 

5) Crea una nuova pagina su Squarespace e opri open the “Iniezione di codice nell’intestazione di pagina”

Nell’Iniezione di codice nell’intestazione di pagina, incolla il codice snippet dalla prima sezione della pagina Clipchamp (quella che include la tua chiave API) come segue:

webcam-video-squarespace

 

6) Poi, metti il secondo codice snippet in un Blocco di Codice nel “Contenuto della pagina” del tuo sito:

 

Modifica il contenuto della pagina,

squarespace-video-camera

 

e aggiungi un nuovo blocco di codice nella pagina in cui desideri visualizzare un pulsante video.

 

add-code-block

 

squarespace-html5-video

 

Nel blocco di codice, inserisci il secondo frammento di codice (più grande) che hai copiato da https://util.clipchamp.com/it/api-setup/install.

 

squarespace-html5-camera

 

Assicurati di aver selezionato le seguenti impostazioni nel blocco di codice: “HTML” nel menu a discesa a destra e deseleziona “Visualizza sorgente” a sinistra. Premi “Applica” quando hai aggiunto lo snippet del codice.

 

7) Quindi, salva e visualizza in anteprima la pagina in cui è stato incorporato il codice Clipchamp

Se gli snippet sono stati aggiunti e salvati correttamente, la pagina di anteprima dovrebbe mostrare il tuo nuovo pulsante del videoregistratore Squarespace. Nella nostra pagina di esempio, il pulsante ha il seguente aspetto:

 

squarespace video recorder - page preview

 

Squarespace video recording button

 

8) Come ultimo passaggio, autorizza il dominio del tuo sito web nelle impostazioni ClipChamp

Affinché il pulsante funzioni, è necessario inserire nella whitelist il dominio del pulsante nelle impostazioni dell’API di Clipchamp come segue:

Copia l’URL del tuo sito e aggiungilo alla lista di domini autorizzati nelle tue impostazioni API di Clipchamp su https://util.clipchamp.com/it/api-setup/domains.

Nel nostro esempio, i domini che abbiamo autorizzato erano clipchamp-test.squarespace.comwww.clipchamp-test.squarespace.com. Assicurati di inserire il tuo dominio e a piacere il suo subdominio www.

 

authorize domain in the Clipchamp API settings

 

Dopo aver aggiunto l’/gli URL nell’elenco, ricarica l’anteprima della pagina Squarespace. Il pulsante del registratore video e l’uploader sulla pagina è ora pronto per essere utilizzato in modo che i visitatori possano iniziare a inviare registrazioni e altri video.

 

squarespace-video-recorder

Mostrare video inviati sul tuo sito

Se desideri utilizzare i video che le persone ti inviano e che ora si trovano nel tuo canale YouTube per visualizzarli sul tuo sito web, consulta le seguenti istruzioni nell’assistenza Squarespace per come incorporare video di YouTube.

 

Squarespace KB about embedding videos

 

Conclusioni

Questi sono tutti i passaggi necessari per raccogliere video se usi Squarespace. Li abbiamo anche riassunti in un breve articolo di aiuto sull’argomento per chiunque si sia già registrato per un account API video di Clipchamp. Il nostro articolo della Knowledge Base include una serie di suggerimenti per la risoluzione di eventuali problemi con il nostro pulsante video da visualizzare correttamente sul tuo sito.
Descrive inoltre un’opzione per incorporare un videoregistratore su tutte le pagine del tuo sito automaticamente e contiene un modello di codice per personalizzare il registratore a tuo piacimento.
Il widget della fotocamera è dotato di un’ampia gamma di opzioni di personalizzazione, ad esempio è possibile modificare il proprio marchio personalizzato, regolare i colori e altri elementi di stile, nonché una serie di impostazioni relative ai video di input e output.
Non abbiamo trattato queste opzioni in questo articolo, tuttavia puoi dare un’occhiata più da vicino nella documentazione API per vedere quale dei suoi parametri desideri aggiungere al tuo videoregistratore Squarespace. Aggiungi semplicemente le opzioni nello snippet di codice che hai inserito nel blocco di codice al punto 6.

Mentre questo post riguarda la ricezione di video in Squarespace, il metodo che abbiamo descritto funziona anche per installare il registratore su altre piattaforme di sviluppo di siti web e CMS, ad esempio abbiamo anche scritto un tutorial per Wix. Il requisito principale per tutti è che è necessario avere il permesso di aggiungere codice personalizzato alle pagine nelle impostazioni di amministrazione del proprio sito.