Es una ajetreada noche de viernes en tu restaurante. El teléfono no para de sonar con órdenes de comida para llevar, y tu personal tiene que hacer malabares entre los clientes presenciales y las órdenes por Internet. En medio del caos, un cliente potencial visita tu sitio web, buscando ordenar. Recorren tu menú, pero luego... no encuentran una forma fácil de ordenar. Frustrados, cierran la pestaña y piden a un competidor.
Ahora imagina un escenario diferente: Ese mismo cliente visita tu sitio web e inmediatamente ve un botón destacado de “Ordenar ahora”. Al hacer clic, ordenan sin problemas y tu cocina lo recibe al instante. Ese es el poder del botón inteligente “Ordenar ahora”. Según una prueba de datos de botones inteligentes para órdenes en línea realizada en el primer trimestre de 2022 y una prueba de datos de widgets por demanda realizada en el cuarto trimestre de 2023, añadir formas muy visibles para que los clientes ordenen, como este botón, puede ayudar a aumentar las ventas entre un 15 % y un 30 %.
¿Qué es el botón inteligente «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 de “Ordenar ahora” 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.
¿Cómo instalo el botón inteligente «Ordenar ahora»?
Sigue estos pasos para instalar el botón inteligente «Ordenar ahora» en tu sitio web:
Ubica el lugar adecuado en el código de tu sitio web: Busca el final de la etiqueta <head> o el principio de la etiqueta <body> en el HTML de tu sitio web.
Copia y pega el código JavaScript: Inserta el siguiente fragmento de 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',
backgroundColor: 'transparent',
buttonBackgroundColor: '#D92128',
borderColor: 'transparent',
buttonText: 'Order Pickup & Delivery',
showModal: true
}
)
</script>
3. Personaliza el código: Como mínimo requerido, debes reemplazar los campos “businessId” con tu ID único de tienda de DoorDash y “businessSlug” con tu información única. Nota: puedes encontrar tu businessId de DoorDash único haciendo referencia a los últimos dígitos de la URL de Ordenar en línea dentro de la pestaña Ordenar en línea del Portal de tiendas.
¿Cómo puedo personalizar mi botón inteligente «ordenar ahora»?
Si estás familiarizado con JavaScript, puedes adaptar el botón inteligente «Ordenar ahora» al estilo de tu sitio web. Estas son las opciones de personalización disponibles:
businessId: Tu ID de tienda DoorDash (cadena numérica) - Este es el único campo obligatorio.
businessSlug: El nombre de tu negocio para la URL generada (cadena alfanumérica, evitar caracteres especiales excepto guiones o guiones bajos)
buttonAlignment: Posición horizontal del botón («izquierda» «centro» o «derecha»).
position: Posición vertical del botón («arriba» o «abajo»)
buttonBackgroundColor: Color del botón (cualquier valor de color CSS válido)
buttonTextColor: Color de texto del botón (cualquier valor de color CSS válido)
buttonWidth: Ancho del botón (cualquier valor de dimensión CSS válido, por ejemplo, «350px», «20em»)
buttonText: Texto que aparece en el botón (por ejemplo, «retiro de la orden y entrega»)
floatingBar: Agrega una barra flotante sólida detrás del botón (verdadero o falso)
backgroundColor: Color de fondo de la barra flotante (cualquier valor de color CSS válido o «transparente»)
borderColor: Bordes superior e inferior de la barra flotante (cualquier valor de color CSS válido o «transparente»)
Todos los campos excepto businessId son opcionales, lo que te permite personalizar el botón según tus preferencias.
¿Cómo instalo el botón inteligente «ordenar ahora» en diferentes plataformas de sitios web?
Dependiendo de la plataforma de tu sitio web, el proceso de instalación puede variar. Aquí tienes instrucciones para algunas plataformas comunes:
¿Cómo agrego el botón en GoDaddy?
Agregar código en GoDaddy requiere una configuración algo personalizada, ya que agrega su propio código decorativo alrededor del código que insertas.
Ve a editar sitio web.
En la página, agrega una nueva sección haciendo clic en uno de los íconos “+”. Se recomienda agregar la sección en la parte superior de la página, preferiblemente por encima del pliegue, ya que de lo contrario no se mostraría la barra hasta que el usuario se desplace hasta la sección donde has agregado el código.
Busca y selecciona la opción HTML.
En el cuadro de texto denominado “Código personalizado”, pega tu código. Aquí hay un pequeño inconveniente: el código de los fragmentos anteriores no funciona directamente, tendrás que modificarlo un poco para que funcione con GoDaddy CMS. Tendrás que sustituir todas las instancias de window por window.top. Inserta el siguiente fragmento en su lugar.
<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: 'Order Pickup & Delivery',
showModal: true
}
)
</script>
6. No te preocupes si la alineación no se ve bien en la vista previa del CMS. Guárdalo y pruébalo en la URL real del sitio web.
¿Cómo añado el botón en Squarespace (se requiere cuenta Premium)?
Es necesario tener una cuenta Premium para completar lo que se indica a continuación:
Selecciona el botón “Editar” en la parte superior izquierda de tu sitio web.
Selecciona “Añadir bloque” en la parte superior izquierda.
Selecciona la opción de código.
Elige HTML y desmarca la opción «mostrar fuente».
Pega el código del botón inteligente «Ordenar ahora» en el cuadro de texto «código» y pulsa aplicar.
Guarda y prueba la alineación del botón en tu sitio web real.
¿Cómo agrego el botón en Wix?
Necesitarás una cuenta premium para completar lo que se indica a continuación:
Abre el editor del sitio y selecciona el botón Agregar elementos en el panel izquierdo.
Selecciona Insertar, luego Herramientas de marketing y luego Código personalizado.
En la sección “Encabezado”, selecciona Agregar código personalizado.
Pega el código del botón inteligente «Ordenar ahora» donde se te indique y elige a qué páginas quieres añadir el código.
Guarda y prueba la alineación del botón en tu sitio web real.
¿Cómo agrego el botón en WordPress?
Necesitarás una cuenta Business para completar lo que se indica a continuación:
Navega a la sección Complementos en el panel.
Selecciona Agregar nuevo.
Busca el complemento «Ordenar en línea de DoorDash».
Selecciona Instalar ahora.
Activa el complemento en el panel de complementos.
Selecciona el enlace de configuración dentro de la fila del complemento «Ordenar en línea de DoorDash».
Establece todos los campos obligatorios:
"Business ID" - tu ID de negocio DoorDash
Texto del botón - Ordenar en línea (predeterminado) o ingresa otra frase
Desde el menú, ve a Apariencia, selecciona Widgets, elige Ordenar en línea de DoorDash y arrastralo a una barra lateral de Ordenar en línea.
Una vez que estés listo, selecciona Listo.
Nota: Asegúrate de que el campo «Mostrar botón:» tiene seleccionado «Sí».
Al seguir estas instrucciones, puedes agregar un Botón inteligente personalizado de órdenes en línea «ordenar ahora» a tu sitio web, lo que brinda a tus clientes una manera conveniente y rápida de ordenar.
Iniciar sesión en el PortalConoce más sobre cómo Ordenar en línea de DoorDash puede ayudar a mejorar tu sitio web.
