Comment ajouter le bouton intelligent « Commander » à votre site Web
Qu’est-ce que le bouton intelligent « Commander »?
Le bouton intelligent « Commander » 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 » est accessible dans le cadre de la Plateforme de commerce DoorDash, une collection d’outils et de produits pour aider les commerçants à développer leurs entreprises et leurs marques. Cette fonctionnalité fait partie des forfaits Boost et Pro.
À quoi sert le bouton intelligent?
Ajoute un appel à l’action persistant « Commander » à votre site Web
Renvoie les clients directement à votre page de Commande en ligne de DoorDash
Reste visible pendant que les clients font défiler la page sur un ordinateur et un appareil mobile
Peut apparaître sur chaque page de votre site Web
Qu’est-ce qu’il me faut avant de pouvoir ajouter le bouton intelligent?
Assurez-vous que Commande en ligne de DoorDash est activée pour votre entreprise
Vous devez avoir accès à l’éditeur HTML ou au système de gestion de contenu de votre site Web
Vous devez connaître votre identifiant d’entreprise DoorDash
Comment puis-je installer le bouton intelligent?
Copiez le code JavaScript ci-dessous.
Collez-le à la fin de la balise <head> ou au début de la balise <body> de votre site Web.
Remplacez businessID et businessSlug par vos renseignements.
Remarque : Le code entre <script> et StorefrontSDK.executeCommand doit rester sur une seule ligne. Évitez d’ajouter des sauts de ligne lors du collage.
<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',
buttonBackgroundColor: '#D92128',
buttonText: 'Order Pickup & Delivery',
showModal: true
});
</script>
Options de personnalisation supplémentaires (avancées)
Si vous êtes à l’aise avec l’édition JavaScript, vous pouvez contrôler davantage la mise en page et le style en utilisant des champs optionnels supplémentaires soutenus par le bouton intelligent :
buttonTextColor : couleur du texte du bouton
buttonWidth : largeur du bouton (p. ex. 350 px ou 20 em)
backgroundColor : couleur d’arrière-plan de la barre flottante (ou transparente)
borderColor : couleur de la bordure supérieure et inférieure de la barre flottante
Tous les champs, sauf businessID sont facultatifs.
Comment puis-je personnaliser le bouton intelligent « Commander »?
Vous pouvez de manière optionnelle ajuster l’apparence et le comportement du bouton intelligent en modifiant les champs de configuration dans le code.
Réglage | Requis | Description |
businessId | Oui | Votre identifiant d’entreprise DoorDash |
businessSlug | Recommandé | Votre nom d’entreprise utilisé dans l’URL de commande |
buttonAlignment | Non | Alignement à gauche, au centre ou à droite |
position | Non | En haut ou en bas de la page |
buttonBackgroundColor | Non | Couleurs dus bouton |
buttonText | Non | Texte affiché sur le bouton |
floatingBar | Non | Ajoute une barre d’arrière-plan derrière le bouton |
showModal | Non | Ouvre la commande dans une fenêtre modale |
Quelles sont les instructions particulières au système de gestion de contenu?
GoDaddy
Allez à Modifier le site Web
Sélectionnez l’icône + pour ajouter une section HTML
Collez le code du bouton intelligent
Remplacez toutes les instances de « window » avec « window.top »
Sauvegardez et prévisualisez votre site Web GoDaddy
Remarque : GoDaddy entoure le code personnalisé de balisage supplémentaire, ce qui nécessite un petit ajustement. L’alignement du bouton pourrait ne pas apparaître correctement dans l’aperçu de l’éditeur GoDaddy. Vérifiez toujours sur l’URL de votre site Web en direct.
Squarespace (compte Premium requis)
Ajoutez une nouvelle section de code
Sélectionnez HTML et décochez l’option Afficher la source
Collez le code et appliquez les modifications
Sauvegardez et prévisualisez votre site Web Squarespace
Wix (compte Premium requis)
Ouvrez l’éditeur de site et cliquez sur Ajouter
Choisissez Intégrer → code personnalisé
Ajoutez le code à la section Tête
Appliquez-le à toutes les pages pour une meilleure visibilité sur Wix
Wordpress (compte professionnel requis)
Allez à Plugiciels → Ajouter nouveau
Cherchez le plugiciel DoorDash Storefront
Installez et activez le plugiciel
Ouvrez les paramètres du plugiciel et entrez votre identifiant d’entreprise
Activez le bouton d’affichage et sauvegardez votre site Web WordPress
Comment puis-je contacter l'assistance?
Si vous rencontrez des problèmes pour installer ou personnaliser le bouton intelligent, communiquez avec le service de soutien aux commerçants.
