Comment ajouter le bouton intelligent « Commander maintenant » à votre site Web

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.

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 :

(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>

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?

Accédez à modifier le site Web.
Sélectionnez l’icône + dans le haut de la page pour ajouter une section.
Sélectionnez l’option HTML.
Collez le code du bouton intelligent « Commander maintenant » dans la zone de texte « code personnalisé ».
Remplacez toutes les instances de « window » par « window.top ».
Enregistrez et testez l’alignement du bouton sur votre site Web.

Comment puis-je ajouter le bouton sur Squarespace (compte Premium obligatoire)?

Un compte Premium est nécessaire pour effectuer ce qui suit :

Choisissez l’icône + au bas de la page d’accueil du site Web pour ajouter une section.
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 cliquez sur le bouton Ajouter.
Sélectionnez Intégré, puis Outils de marketing, puis Code personnalisé.
Dans la section « En-tête », choisissez Ajouter du code.
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 Portail

En savoir plus sur la façon dont Commande en ligne de DoorDash peut améliorer votre site Web.