¿Qué es el Botón inteligente de “Ordenar ahora”?
El botón inteligente «Ordenar ahora» permite a los clientes encontrar la forma de ordenar en línea desde el momento en que llegan a tu página de inicio, en lugar de tener que buscarlo en tu sitio web.
El Botón inteligente está disponible como parte de la Plataforma de comercio de DoorDash, una colección de herramientas y productos que ayudan a las tiendas a hacer crecer sus negocios y marcas. Esta función forma parte de los paquetes Boost y Pro.
¿Qué hace el Botón inteligente?
Agrega una llamada a la acción persistente de “Ordena ahora” a tu sitio web
Vincula directamente a los clientes con tu página de Órdenes en línea
Se mantiene a la vista mientras los clientes navegan desde su PC de escritorio y desde su celular
Puede aparecer en todas las páginas de tu sitio web
¿Qué necesito hacer antes para poder agregar el Botón inteligente?
Asegúrate de que las Órdenes en línea estén habilitadas para tu negocio
Tienes acceso al editor HTML o CMS de tu sitio web
Conoces tu ID de negocio de DoorDash
¿Cómo instalo el Botón inteligente?
Copia el código JavaScript a continuación.
Pégalo al final de la etiqueta <head> o al principio de la etiqueta <body> en tu sitio web.
Sustituye businessId y businessSlug con tu información.
Nota: El código entre <script> y StorefrontSDK.executeCommand debe mantenerse en una sola línea. Evita agregar saltos de línea cuando pegues el código.
<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>
Otras opciones de personalización (avanzadas)
Si estás familiarizado con la edición de JavaScript, puedes controlar aún más el diseño y el estilo mediante campos opcionales adicionales compatibles con el Botón inteligente:
buttonTextColor: color del texto del botón
buttonWidth: ancho del botón (por ejemplo, 350px o 20em)
backgroundColor: color de fondo de la barra flotante (o transparente)
borderColor: bordes superior e inferior de la barra flotante
Todos los campos excepto businessId son opcionales.
¿Cómo personalizo el Botón inteligente de "Ordenar ahora"?
Opcionalmente, puedes modificar la apariencia y el comportamiento del Botón inteligente si editas los campos de configuración en el código.
Configuración | Obligatorio | Descripción |
businessId | Sí | Tu ID de negocio de DoorDash |
businessSlug | Recomendado | El nombre del negocio que se usa en la URL de la orden |
buttonAlignment | No | Alineación izquierda, central o derecha |
position | No | Parte superior o inferior de la página |
buttonBackgroundColor | No | Color del botón |
buttonText | No | Texto que se muestra en el botón |
floatingBar | No | Agrega una barra de fondo detrás del botón |
showModal | No | Abre la orden en una ventana modal |
¿Cuáles son las instrucciones específicas de CMS?
GoDaddy
Ve a "Editar sitio web".
Selecciona el icono + para agregar una nueva sección HTML
Pega el código del Botón inteligente
Reemplaza todas las instancias de ventana con window.top
Guarda y previsualiza tu sitio web de GoDaddy
Nota: GoDaddy envuelve código personalizado con marcado adicional, lo que requiere un pequeño ajuste. La alineación del botón puede no aparecer correctamente en la vista previa del editor de GoDaddy. Siempre prueba la URL de tu sitio web activo.
Squarespace (se requiere Premium)
Agrega una nueva sección del Código.
Selecciona "HTML" y desmarca "Mostrar fuente".
Pega el código y aplica los cambios.
Guarda y previsualiza tu sitio web de Squarespace.
Wix (se requiere Premium)
Abre el Editor del sitio y selecciona el "Agregar".
Elige "Incrustar" → "Código personalizado".
Agrega el código a la sección del Encabezado.
Aplícalo a Todas las Páginas para obtener la mejor visibilidad en Wix.
Wordpress (se requiere Business)
Ve a "Complementos" → "Agregar nuevo".
Busca DoorDash Storefront.
Instala y activa el complemento.
Abre la configuración del complemento e introduce tu ID de negocio.
Activa el Botón de visualización y almacena tu sitio web de WordPress.
¿Necesitas ayuda?
Si tienes problemas con la instalación o la personalización del Botón inteligente, envía una solicitud de asistencia.
