Integre módulos em suas páginas.

Depois de criar a sua URL de solicitação final, você a integrará ao seu site. Primeiro, você escolherá em que ponto do fluxo de vendas seus módulos de anexo devem aparecer. Em seguida, você escolherá como exibi-los: como uma sobreposição na página ou incorporados em um iframe.

Você pode usar módulos anexos para exibir mais de uma linha de negócios como opções adicionais para seus usuários. A configuração padrão permite que você escolha uma linha de negócios principal, que é exibida em formato de cartão, e uma ou mais linhas de negócios secundárias em uma única mensagem, nas quais o usuário pode clicar para obter mais opções. Além disso, se as necessidades da sua empresa exigirem mais de um visor principal para as linhas de negócios, você pode fazer isso com módulos integrados.

Independentemente de como e quando o módulo for exibido, quando o usuário interagir com os resultados, a seleção será aberta em uma nova aba.

Escolha um local de fluxo

Para cada caminho de compra que você habilitar, você precisará pensar em qual é o local ideal para seus usuários encontrarem os módulos anexos.

Pre-purchase

Nas páginas de destino e ao longo do caminho in-purchase, módulos flexíveis destacam ofertas de produtos complementares. Elas também podem ser usadas sem um link para o seu site modelo, como uma mensagem introdutória para aumentar o conhecimento sobre as opções disponíveis.

Tempo após a compra

Utilize módulos flexíveis ou de recomendações — ou ambos — para sugerir ofertas de produtos adicionais. Ao sobrepor um módulo flexível, você pode preparar o usuário para considerar futuras compras com base em recomendações incorporadas.

Selecione uma opção de exibição

Você pode configurar seus módulos anexados para serem exibidos como uma sobreposição que muda o foco do usuário para uma nova janela, ou incorporados na própria página.

Tratamento de sobreposição

A opção de sobreposição oferece uma visualização focada do módulo, destacando-o sobre a página da web. O usuário pode interagir com o módulo ou sair dele clicando no botão fechar (X) ou clicando fora do módulo.

Para usar este módulo, inclua o código Javascript dentro da tag <body>do HTML.

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

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

Tratamento embutido

Um módulo de anexo incorporado fornece uma visualização integrada, permitindo que o usuário veja e interaja com os resultados com base na posição da URL na página.

Para configurar este módulo, você deverá incluir o código Javascript dentro da tag <body>do HTML e adicionar um elemento divcom id="krazyglue-embedded-wrapper".

Por exemplo:

<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

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

Configurações adicionais para módulos incorporados

Você também precisará verificar a política de referência — informações de rastreamento de onde veio o clique — porque esse valor define a altura do iframe no qual o módulo incorporado é exibido. A página na qual o módulo está integrado deve ser configurada com o valor da política de referência. origin-when-cross-origin Para exibir corretamente.

Não tem certeza de qual é o valor da política de referência na página que você está integrando? Veja como verificar.

Abra a página onde o módulo de anexo incorporado será integrado usando qualquer navegador da web.
Clique com o botão direito do mouse na página e clique em Inspecionar para abrir as ferramentas de desenvolvedor.
No painel de ferramentas, vá para a guia Rede e, em seguida, recarregue a página.
Na aba Rede, procure pelo domínio da página. Ali, você verá os cabeçalhos de página para a política de referência — por exemplo: <meta name="referrer" content="origin-when-cross-origin" />