Integra módulos en tus páginas

Una vez que hayas creado la URL definitiva de la solicitud, la integrarás en tu sitio web. Primero, tendrás que elegir en qué punto del proceso de venta deben aparecer tus módulos adicionales. Después, elegirás cómo mostrarlos: como una capa superpuesta en la página o incrustados en un iframe.

>> Más información sobre cómo crear la URL de tu solicitud final

Puedes usar módulos adjuntos para mostrar más de una línea de negocio como opciones adicionales para tus usuarios. La configuración predeterminada te permite elegir una línea de negocio principal, que se muestra en formato de tarjeta, y una o más líneas de negocio secundarias en un único mensaje en el que pueden hacer clic para ver más opciones. Además, si tu negocio necesita más de una línea principal de visualización, puedes hacerlo con módulos integrados.

Independientemente de cómo y cuándo se muestre el módulo, cuando el usuario interactúe con los resultados, su selección se abrirá en una nueva pestaña.

Elige una ubicación de flujo

Por cada ruta de compra que actives, te conviene pensar bien cuál es el lugar adecuado para que tus usuarios encuentren los módulos adjuntos.

Pre-purchase

En las páginas de destino y en la ruta « in-purchase », unos módulos flexibles destacan las ofertas de productos complementarios. También se pueden usar sin un enlace a tu página de plantillas, como mensaje introductorio para dar a conocer las opciones disponibles.

Periodo posterior a la compra

Usa los módulos «flexibles» o «de recomendaciones» —o ambos— para sugerir productos adicionales. Cuando superpones un módulo flexible, esto puede animar al usuario a plantearse nuevas compras a partir de las recomendaciones integradas.

Elige una opción de visualización

Puedes configurar tus módulos adjuntos para que se muestren como una ventana superpuesta que desvíe la atención del usuario hacia una nueva ventana, o bien integrados directamente en la propia página.

Tratamiento de superposición

La opción de superposición te permite ver el módulo con mayor claridad, ya que lo resalta sobre la página web. El usuario puede interactuar con el módulo o salir de él haciendo clic en el botón de cerrar (X) o haciendo clic fuera del módulo.

Para usar este módulo, incluye el código JavaScript dentro de la etiqueta <body> del HTML.

Overlaid screen with the heading 'Thanks! You've booked your hotel. Do you need another room too?' showing 3 options for additional rooms

Ejemplo de código

<!DOCTYPE html>
<html>
<head>
    <title>Booking Confirmation Page</title>    
</head>
<body>

    <h1>Booking Confirmation Page</h1>
    <p>Congratulations on your purchase</p>

    <#-- The overlay attach module Javascript code. -->
    <script src="//xsell.expedia.com/xsell-pwa.js?partnerId=partner123&outboundStartDateTime=2023-01-02T11%3A55%3A00%2B08%3A00&outboundEndDateTime=2023-01-02T12%3A55%3A00%2B08%3A00&returnStartDateTime=2023-01-12T22%3A30%3A00%2B08%3A00&returnEndDateTime=2023-01-12T22%3A30%3A00%2B08%3A00&destinationTLA=LAX&numOfAdults=2&locale=en-US&currencyCode=USD&bookingDateTime=2022-11-12T12%3A32%3A15%2B08%3A00&bookingId=123ABC&bookingStatus=confirmed&signature=bj01fgT85mUiRmzxxSufSmlGpiI">
    </script>

</body>
</html>

Tratamiento integrado

Un módulo de adjuntos integrado ofrece una vista unificada, lo que permite al usuario ver los resultados e interactuar con ellos según la posición de la URL en la página.

Para configurar este módulo, tienes que incluir el código JavaScript dentro de la etiqueta <body> del HTML y añadir un elemento div con id="krazyglue-embedded-wrapper".

Por ejemplo:

<div id="krazyglue-embedded-wrapper">
       <#-- The first embedded attach module iframe will be loaded here. -->
</div>

Page showing itinerary confirmation, then an embedded block with the title 'Great news! You qualify for special hotel deals because you booked a flight' and 3 hotel deal options

Ejemplo de código

<!DOCTYPE html>
<html>
<head>
    <title>Booking confirmation page</title>    
</head>
<body>
    <h1>Booking confirmation page</h1>
    <p>Congratulations on your purchase</p>

    <#-- The embedded attach module Javascript code. -->
    <script src="//xsell.expedia.com/xsell-pwa.js?partnerId=partner123&outboundStartDateTime=2022-01-02T11%3A55%3A00%2B08%3A00&outboundEndDateTime=2014-01-02T12%3A55%3A00%2B08%3A00&returnStartDateTime=2014-01-12T22%3A30%3A00%2B08%3A00&returnEndDateTime=2014-01-12T22%3A30%3A00%2B08%3A00&destinationTLA=LAX&numOfAdults=2&locale=en-US&currencyCode=USD&bookingDateTime=2013-11-12T12%3A32%3A15%2B08%3A00&bookingId=123ABC&bookingStatus=confirmed&signature=bj01fgT85mUiRmzxxSufSmlGpiI">
    </script>
   
    <div>
       <p>Information about your flight</p>
    </div>
    <div>
       <p>Booking details</p>
    </div>

    <div id="krazyglue-embedded-wrapper">
       <#-- The first embedded attach module iframe will be loaded here. -->
    </div>
</body>
</html>

También tendrás que comprobar la política de referenciador —la información que indica de dónde viene el clic—, porque ese valor determina la altura del iframe en el que se muestra el módulo incrustado. La página en la que está integrado el módulo debe tener configurado el valor de la política de referenciadores origin-when-cross-origin Para que se vea bien.

¿No sabes cuál es el valor de la política de referenciadores en la página en la que estás haciendo la integración? Te explico cómo comprobarlo.

Abre la página en la que se va a integrar el módulo de archivos adjuntos incrustado con cualquier navegador web.
Haz clic con el botón derecho en la página y selecciona «Inspeccionar» para abrir las herramientas de desarrollo.
En el panel de herramientas, ve a la pestaña «Red» y, a continuación, actualiza la página.
En la pestaña «Red», busca el dominio de la página. Allí verás los encabezados de página de la política de referencias; por ejemplo: <meta name="referrer" content="origin-when-cross-origin" />

Módulo de doble fijación

Para integrar un módulo de conexión integrado dual, incluye el parámetro adicional embeddedId=krazyglue-embedded-wrapper-2 En la solicitud del módulo de conexión integrado y actualiza el ID de <div> a krazyglue-embedded-wrapper-2.

Nota: No incluyas el parámetro embeddedId en la solicitud del módulo de adjuntar archivos emergente JavaScript src.

Ejemplo de código

<body>
/** Popup module script */
  <script>/xsell-pwa.js?partnerId=sas_hotel_popup...param=xyz&signature=bj01fgT85mUiRmzxxSufSmlGpiI"></script>
/** Embedded module script */
  <script>/xsell-pwa.js?partnerId=sas_hotel_embedded...param=xyz&embeddedId=krazyglue-embedded-wrapper-2 &signature=bj01fgT85mUiRmzxxSufSmlGpiI"></script>
  <div id="krazyglue-embedded-wrapper-2"></div>
/** The embedded attach module iframe will be loaded here. */
</body>