Nous utilisons juste ce dont on a besoin pour le fonctionnement du site. Pour plus d'infos lire notre politique de confidentialité.
icon-cookie

Comment connecter Uploadcare à Webflow ?

Thomas Labonne
Thomas Labonne
February 5, 2022
Bloc de téléchargement uploadcare sur fond bleu avec logo webflow

Tables des matières

Uploadcare est un outil no-code qui vous permet de télécharger de traiter et de transférer tout type de fichier entre plusieurs applications web. C'est donc une infrastructure complète qui vous permettra de gréer les fichiers de votre site Webflow. Parmi ses principales fonctionnalités, uploadcare permettra à votre site Webflow de :

  • Télécharger des fichiers : uploadcare se connecte à 12 sources externes tels que Instagram, Google Drive, Dropbox, les fichiers de votre ordinateur, etc. L'outil vous permet de télécharger des fichiers faisant jusqu'à 5 To.
  • Gérer la donnée : l'outil dispose d'une API qui vous permettra de mettre en place des workflow simples comme complexes : API, espace de stockage, webhooks, etc.
  • Traiter des fichiers : le traitement des fichiers est assez poussé, notamment au niveau des images et vidéos : conversion de documents, traitement de vidéos, reconnaissance d'objets, active le responsive sur des images, etc.
  • Créer des flux de données : les flux de données sont protégés, cryptés, et livrés de manières optimale. Par exemple avec l'utilisation de système responsive pour livrer les images. 

Personnalisable et sécurisé, uploadcare est donc un moyen efficace pour substituer à la fonctionnalité de téléchargement native de Webflow, qui est plus limitée et accessible à partir du plan Business : non adapté à des volumen

Voici quels sont les étapes pour créer un système de téléchargement gratuit pour votre site Webflow avec Uploadcare.

Conditions préalables

Pour suivre ce tuto vous aurez au préalable besoin de :

  1. Disposer d'un compte Webflow payant, car plusieurs fonctionnalités que nous utiliserons sont uniquement accessible depuis une version payante.
  2. Un compte Uploadcare gratuit

Etape 1 : Créez une clé API Uploadcare

La clé API Uploadcare est un moyen d'identification pour pouvoir connecter l'API de votre compte à d'autres applications. L'API nous permettra ici d'identifier votre projet Uploadcare depuis Webflow. Nous allons ici informer votre formulaire Webflow vers quel projet Uploadcare il faudra envoyer le fichier téléchargé.

Pour obtenir votre clé API Publique il vous suffit d'y accéder depuis l'onglet API keys de votre espace Uploadcare.

Interface API Uploadcaer

Etape 2 : Ajoutez le code Uploadcare à Webflow

Connectez vous à votre compte Webflow et rendez-vous dans les paramètres de votre projet. Allez dans l'onglet "Custom Code" copier le code code ci-dessous. Intégrez le custom code dans le "Head Code".

<script> UPLOADCARE_ PUBLIC_KEY = 'YOUR_ PUBLIC_KEY'; </script><script src="https: //ucarecdn.com/ libs/widget/3.x/ uploadcare. full.min.js" data-integration="Webflow"> </script>

Dans le script, remplacer 'YOUR_PUBLIC_KEY' par votre clé API publique de l'étape 1 comme ceci : 'xxxxxxxxxxxxxx'

Custom code Webflow

Etape 3 : Personnalisez l'apparence d'Uploadcare dans Webflow

Uploadcare vous met à disposition de nombreux embed code différents qui vont vous permettre de personnaliser l'apparence de votre outil de téléchargement :

  • Personnaliser le bouton de téléchargement
  • Personnaliser l'animation de chargement de fichiers
  • Ajouter une barre de progression
  • Ajouter des prévisualisations de fichier
  • Ajouter une possibilité de drag & drop
  • etc.

Pour personnaliser l'apparence d'Uploadcare dans Webflow vous devrez

  1. Récupérer le custom code personnalisé
  2. Utilisez un CSS Webflow personnalisé
Embed code personnalisé Uploadcare

Etape 4 : Créez un formulaire web dans Webflow

Depuis le mode designer vous devrez ajouter sur votre page un formulaire Webflow. Nous intégrerons ensuite le lien de téléchargement Uploadcare dans ce formulaire. Il n'est pas nécessaire d'ajouter un nouvel élément Form Block si votre page dispose déjà d'un formulaire.

  1. Cliquez en haut à gauche sur l'icon "+" "Add Elements"
  2. Allez jusqu'à l'onglet Forms
  3. Glissez déposez l'élément "Form Block" sur votre page.

Etape 5 : Intégrez Uploadcare à votre formulaire Webflow

Pour connecter Uploadcare à Webflow, vous devrez procéder en plusieurs étapes :

  1. Ajoutez un champ texte à votre formulaire : Add Elements > Forms > Input.
  2. Depuis les paramètres du champs, allez dans "Custom Attributes"
  3. Cliquez sur l'icone + pour ajoutez un nouvel attribut personnalisé :
  • Name : role
  • Value : uploadcare-uploader
Designer webflow avec focus sur les customs attributes

4. Vous devrez ensuite masquer le champs texte en vous rendant dans les paramètres de style (icone pinceau) > section "Layout" > cliquez sur l'icone "oeil barré" pour masquer le champs.

Champ masqué Webflow entouré en bleu

Etape 6 : Publiez votre site

Votre système de téléchargement Uploadcare est connecté à votre site Webflow. Pensez à bien publier votre site pour l'activer.

Vous méritez un site Webflow qui fait l'effet " Wahouu " !

Prenez contact avec nous aujourd'hui. L'équipe fantastique de Digidop est prête pour vous aider à construire un site web qui répond à vos besoins 🚀

Site digidop.fr sur un écran d'ordinateur avec un badge de recommandations et des réactions