Votre restaurant est très fréquenté ce vendredi soir. Le téléphone sonne sans cesse pour des commandes à emporter et votre personnel ne sait plus où donner de la tête entre les personnes aux tables et les demandes en ligne. Au milieu de ce chaos, un client potentiel visite votre site Web en voulant passer une commande. Il parcourt votre menu, mais ensuite... il ne trouve pas de moyen facile de commander. Frustré, il ferme l’onglet et passe une commande auprès d’un concurrent.
Imaginez maintenant un autre scénario : ce même client visite votre site Web et repère immédiatement un bouton « Commander maintenant » bien en évidence. En cliquant sur ce bouton, ils passent facilement leur commande et votre cuisine la reçoit instantanément. Voilà toute la puissance du bouton intelligent « Commander maintenant ». D’après un test de données sur le bouton intelligent de commande en ligne réalisé au premier trimestre de 2022 et un test de données sur les widgets Drive On-Demand réalisé au quatrième trimestre de 2023, l’ajout de moyens très visibles permettant aux clients de commander, comme ce bouton, peut contribuer à augmenter les ventes de 15 à 30 %.
Qu’est-ce que le bouton intelligent « Commander maintenant »?
Le bouton intelligent « Commander maintenant » permet aux clients de trouver facilement le moyen de passer une commande en ligne dès qu’ils arrivent sur votre page d’accueil, au lieu d’avoir à effectuer une recherche sur votre site Web.
Le bouton intelligent « Commander maintenant » est accessible dans le cadre de la Plateforme de commerce DoorDash, une collection de produits et d’outils pour aider les commerçants à développer leurs entreprises et leurs marques. Cette fonctionnalité fait partie des forfaits Boost et Pro.
Comment installer le bouton intelligent « Commander maintenant »?
Suivez ces étapes pour installer le bouton intelligent « Commander maintenant » sur votre site Web :
Trouver l’endroit approprié dans le code de votre site Web : trouvez la fin de la balise <head> ou le début de la balise <body> dans le code HTML de votre site Web.
Copier et coller le code JavaScript : insérez l’extrait de code suivant :
<script>
(function(e, t, r, n) {
var o, c, s;
o = e.document, c = t.children[0], s = o.createElement("script"), e.StorefrontSDKObject = "StorefrontSDK", e[e.StorefrontSDKObject] = {
executeCommand: function(t, r) {
e[e.StorefrontSDKObject].buffer.push([t, r])
},
buffer: []
}, s.async = 1, s.src =’https://web-apps.cdn4dd.com/webapps/sdk-storefront/latest/sdk.js’ , t.insertBefore(s, c)
})(window, document.head);
StorefrontSDK.executeCommand('renderFloatingButton’’, {
businessId: 1234,
businessSlug: 'MerchantName’’,
floatingBar: true,
position: 'bottom’’,
buttonAlignment: ’center’,
backgroundColor: ’transparent’,
buttonBackgroundColor: ’#D92128’,
borderColor: ’transparent’,
buttonText: ’Commander’,
showModal: true
}
)
</script>
3. Personnaliser le code : vous devez obligatoirement remplacer la valeur du champ « businessId » par votre identifiant de commerce DoorDash unique et la valeur du champ « businessSlug »” par votre nom. Remarque : Votre identifiant de commerce DoorDash unique est les derniers chiffres de l’URL de Commande en ligne dans l’onglet Commande en ligne du Portail commerçant.
Comment puis-je personnaliser mon bouton « Commander maintenant »?
Si vous êtes à l’aise avec JavaScript, vous pouvez adapter le bouton intelligent « Commander maintenant » à l’aspect et à la convivialité de votre site Web. Voici les options de personnalisation possibles :
businessId : votre identifiant de commerce DoorDash (chaîne numérique) – il s’agit du seul champ obligatoire.
businessSlug : le nom de votre entreprise pour l’adresse URL générée (chaîne alphanumérique, évitez les caractères spéciaux comme les tirets ou les barres de soulignement).
buttonAlignment : position horizontale du bouton ('left’’ [gauche], ’center’ [centre], ou 'right’’ [droit]).
position : position verticale du bouton (’top’ [haut] ou 'bottom’’ [bas]).
buttonBackgroundColor : la couleur du bouton (n’importe quelle valeur de couleur CSS valide).
buttonTextColor : la couleur du texte du bouton (n’importe quelle valeur de couleur CSS valide).
buttonWidth : largeur du bouton (n’importe quelle valeur de taille CSS valide, p. ex. '350px’’, '20em’’).
buttonText : le texte affiché sur le bouton (p. ex. ’Commander’).
floatingBar : ajoute une barre flottante derrière le bouton (vrai ou faux).
backgroundColor : couleur d’arrière-plan de la barre flottante (n’importe quelle valeur de couleur CSS valide ou ’transparent’).
borderColor : les bordures supérieure et inférieure de la barre flottante (n’importe quelle valeur de couleur CSS valide ou ’transparent’).
Tous les champs sauf businessId sont facultatifs, ce qui vous permet de personnaliser le bouton à votre goût.
Comment puis-je installer le bouton intelligent « Commander maintenant » sur différentes plateformes de sites Web?
La procédure d’installation peut varier en fonction de la plateforme de votre site Web. Voici les instructions pour certaines plateformes :
Comment puis-je ajouter le bouton sur GoDaddy?
Ajouter du code sur GoDaddy est un peu particulier, car la plateforme ajoute son propre code décoratif autour du code que vous insérez.
Accédez à modifier le site Web.
Sur la page, ajoutez une nouvelle section en cliquant sur l’une des icônes « + ». Il est recommandé d’ajouter la section tout en haut de la page, de préférence au-dessus de la ligne de flottaison, sinon la barre ne s’affichera pas tant que l’utilisateur n’aura pas fait défiler jusqu’à la section où vous avez inséré le code.
Recherchez l’option HTML, puis sélectionnez-la.
Dans la boîte de texte intitulée « Code personnalisé », collez votre code. Il y a un petit détail à noter ici : le code des extraits ci-dessus ne fonctionne pas directement avec le CMS GoDaddy. Vous devrez le modifier légèrement pour qu’il soit compatible. Vous devrez remplacer toutes les occurrences de window par window.top. Insérez plutôt l’extrait ci-dessous.
<script>
!function(e,t,r,n){var o,c,s;o=e.document,c=t.children[0],s=o.createElement("script"),e.StorefrontSDKObject="StorefrontSDK",e[e.StorefrontSDKObject]={executeCommand:function(t,r){e[e.StorefrontSDKObject].buffer.push([t,r])},buffer:[]},s.async=1,s.src="https://web-assets.cdn4dd.com/prod/storefront-sdk/latest/app.js",t.insertBefore(s,c)}(window.top,window.top.document.head);
window.top.StorefrontSDK.executeCommand('renderFloatingButton',
{
businessId: 1234,
storeId: 544025,
businessSlug: 'Merchant Name',
floatingBar: true,
position: 'bottom’’,
buttonAlignment: 'center',
backgroundColor: 'transparent',
buttonBackgroundColor: '#D92128',
borderColor: ’transparent’,
buttonText: ’Commander’,
showModal: true
}
)
</script>
6. Ne vous inquiétez pas si l’alignement ne semble pas correct dans l’aperçu sur le CMS. Enregistrez les modifications et testez-les sur l’URL réelle du site Web.
Comment puis-je ajouter le bouton sur Squarespace (compte Premium obligatoire)?
Un compte Premium est nécessaire pour effectuer ce qui suit :
Sélectionnez le bouton « Modifier » situé dans le coin supérieur gauche de votre site Web.
Choisissez « Ajouter un bloc » dans le coin supérieur gauche.
Sélectionnez l’option code.
Choisissez HTML et désactivez l’option « afficher la source ».
Coller le code du bouton « Commander maintenant » dans la zone de texte « code » et cliquez sur Appliquer.
Enregistrez et testez l’alignement du bouton sur votre site Web.
Comment puis-je installer le bouton sur Wix?
Vous aurez besoin d’un compte Premium pour effectuer ce qui suit :
Ouvrez l’éditeur de site et sélectionnez le bouton Ajouter des éléments dans le panneau de gauche.
Sélectionnez Intégré, puis Outils de marketing, puis Code personnalisé.
Dans la section « En-tête », choisissez Ajouter du code personnalisé.
Collez le code du bouton « Commander maintenant » à l’endroit indiqué et choisissez les pages auxquelles le code doit être ajouté.
Enregistrez et testez l’alignement du bouton sur votre site Web.
Comment puis-je ajouter le bouton sur WordPress?
Vous aurez besoin d’un compte Entreprise pour effectuer ce qui suit :
Accédez à la section Plugiciels dans le tableau de bord.
Sélectionnez Ajouter un nouveau.
Recherchez le plugiciel « Commande en ligne ».
Sélectionnez Installer maintenant.
Activez le plugiciel dans le tableau de bord des plugiciels.
Cliquez sur le lien « Paramètres » dans la ligne du plugiciel « Commande en ligne de DoorDash ».
Remplissez tous les champs obligatoires :
« Idendifiant de l’entreprise » – votre identifiant d’entreprise DoorDash.
« Texte de bouton » – « Commandez en ligne » (par défaut) ou entrez une autre phrase
Dans le menu, accédez à Apparence, sélectionnez Widgets, choisissez Commande en ligne de DoorDash et glissez-le dans une barre latérale Commande en ligne.
Lorsque vous êtes prêt, sélectionnez Terminer.
Remarque : veillez à ce que « Oui » soit sélectionné dans le champ « Afficher le bouton : ».
En suivant ces instructions, vous pouvez ajouter un bouton intelligent personnalisé de Commande en ligne « Commander maintenant » à votre site Web, offrant ainsi à vos clients un moyen pratique et rapide de passer des commandes.
Connectez-vous au PortailEn savoir plus sur la façon dont Commande en ligne de DoorDash peut améliorer votre site Web.
