Prepare the email template

In the Avantio VRMS, create a “Security deposit” template. Access the source code editor and paste the sample code provided by Avantio (make sure the template is completed in every language if you are sending international emails). You must replace the [ACCOUNT_ID_AVANTIO] field with the information from your “USER” column in the API Keys.

The username begins with ‘GA’, followed by 11 digits.

Example: GAxxxxxxxxxxx

Source code provided by Avantio

English:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<style>

* {

-ms-text-size-adjust: 100%;

-webkit-text-size-adjust: 100%;

}

body {

margin: 0;

padding: 0;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

background-color: #ffffff;

width: 100% !important;

height: 100% !important;

}

h1 {

color: #b6d7a8/*colorCorporativo*/;

font-size: 18px;

font-weight: bold;

line-height: 26px;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

margin: 0px;

}

#tinymce h2 {

color: #393939;

font-size: 18px;

font-weight: bold;

letter-spacing: 0.24px;

line-height: 24px;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

}

h3 {

margin: 0;

margin-bottom: 5px;

margin-top: 3px;

padding: 0;

font-size: 14px;

line-height: 23px;

font-weight: normal;

color: #393939;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

}

h4 {

color: #9B9B9B;

font-size: 13px;

letter-spacing: 0.17px;

line-height: 18px;

font-weight: normal;

margin: 0px;

text-align: justify;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

}

h5 {

margin: 0px;

padding: 0;

font-size: 12px;

line-height: 20px;

font-weight: 600;

color: #393939;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

}

h6 {

margin: 0;

padding: 0;

font-size: 12px;

font-weight: normal;

color: #2c333c;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

}

.colorLogoActivoBorder {

border-top: 9px solid #b6d7a8!important;

}

.backgroundCorporativo {

background-color:#b6d7a8!important;

}

.bordesGrises{

border-left: 10px solid #ebecee;

border-right: 10px solid #ebecee;

border-bottom: 10px solid #ebecee;

}

.blockEmail, .blockEmailNoResponsive, .tableDefault {

background: white;

border-collapse: initial;

padding-left: 40px;

padding-right:40px;

padding-bottom: 25px;

}

.blockTitle {

padding-top: 20px;

padding-bottom:20px;

}

.noPaddingTable tr td {

padding: 0px!important;

}

.doubleColumn {

width:50%

}

ul {

padding-left: 5px;

margin-top: 0px;

}

.title {

font-size: 22px!important;

}

.subtitle {

font-size: 14px!important;

}

@media (max-width: 767px) and (orientation: landscape) {

table.blockEmail { width: 100%!important; }

}

@media (min-width: 650px) {

#principal {

min-width: 650px;

max-width: 650px;

}

@media screen and (max-width: 600px) {

h1,h2 { font-size: 30px!important}

h3,.title { font-size: 25px!important}

h4,h5,h6,.subtitle { font-size: 20px!important }

ul, p, em { font-size: 20px!important}

table.blockEmail, table.tableDefault { width: 100%!important; }

thead {

display: none;

}

tr:nth-of-type(2n) {

background-color: inherit;

}

table.blockEmail tbody td {

display: block;

}

table.blockEmail tbody td:before {

content: attr(data-th);

display: block;

}

table.tableDefault tbody td {

display: table-cell!important;

}

table.tableDefault tbody td:before {

content: none!important;

display: initial!important;

}

.blockTitle {

padding-left: 20px!important;

padding-top: 20px!important;

padding-bottom:20px;

}

.noPaddingTable {

margin: 0px!important;

}

.doubleColumn img {

width: 100%!important;

}

.doubleColumn {

width: 100%!important;

padding-left: 0px!important;

margin: 0px!important;

padding-bottom: 10px!important;

padding-top: 10px!important;

}

.doubleColumn table tr td {

padding-left: 20px!important;

}

.blockEmail, .blockEmailNoResponsive, .tableDefault {

background: white;

border-collapse: initial;

padding-left: 20px!important;

padding-right:20px!important;

}

.inlineTable{

display: inline-table!important;

white-space: nowrap;

}

.width10{

width: 10%;

}

.width40{

width: 40%;

}

.width50{

width: 50%;

}

.desgloseResponsive{

font-size: 16px;

padding-left: 20px;

}

.tableCell{

display: table-cell !important;

}

img {

max-width: 100%!important;

}

ul {

padding-left: 50px!important;

}

.blockSimple td, .bloqueDoble td {

padding-left: 20px!important;

}

.bloqueDoble .doubleColumn td {

padding-left: 0px!important;

}

table tr td {

width:auto!important;

height:auto!important;

}

</style>

</head>

<body>

<tbody>

<tbody>

<tr>

<tbody>

</tr>

</tbody>

</table>

<tbody>

<p class="title"><strong>Hello,</strong></p>

<p class="subtitle">We thank you for your trust and for your reservation <avttag class="input-tag mceNonEditable" title="Reserva" data-text="#locator#">Localizador</avttag>. </p>

<p class="subtitle">As specified at the time of your reservation, you still have to make your security deposit of <avttag class="input-tag mceNonEditable" title="Reserva" data-text="#bookingDepositAccomodation#">Fianza de la reserva</avttag>.</p>

<p class="subtitle">To facilitate this, we use the Swikly secure online service that allows you to deposit your deposit online, without impacting your bank limit.</p>

<p class="subtitle">Please click on the button below to make your security deposit:</p>

<p class="subtitle">We remain at your disposal for any further information.</p>

<p class="subtitle"><a id="botonPersonalizado" style="background-color: #b6d7a8!important; height: 30px; width: 158px; border-radius: 4px; border: 0px; box-shadow: 02px10px0rgba(0,0,0,0.16); color: white; font-weight: bold; cursor: pointer; margin-top: 25px; margin-bottom: 30px; text-decoration: none; text-transform: uppercase; text-align: center; font-size: 14px; padding: 7px 15px 7px 15px;" rel="noopener" href="https://avantio.swikly.com/[ACCOUNT_ID_AVANTIO]/secure/#IdBooking#" target="_blank">Click here</a></p>

</td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<p class="atentamente">We look forward to welcoming you soon,</p>

<p class="atentamente">Cordially</p>

<p class="atentamente"><br /> <avttag class="input-tag mceNonEditable" title="Gestor de alojamientos" data-text="#companyName#">Nombre</avttag> </p>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

<br />

<p style="color: #2d414c; font-family: Arial; font-size: 12px; letter-spacing: 0.21px; line-height: 26px; text-align: center; margin-bottom: 10px; margin-top: 10px;"> <strong><avttag class="input-tag mceNonEditable" title="Gestor de alojamientos" data-text="#companyName#">Nombre</avttag></strong> <br /><avttag class="input-tag mceNonEditable" title="Razón Social" data-text="#companyInvoicePhone#">Teléfono</avttag> - <avttag class="input-tag mceNonEditable" title="Razón Social" data-text="#companyInvoiceMail#">Email</avttag> <br /><avttag class="input-tag mceNonEditable" title="Gestor de alojamientos" data-text="#companyStreet#">Calle</avttag>, <avttag class="input-tag mceNonEditable" title="Razón Social" data-text="#companyInvoiceNumber#">Número calle</avttag> <avttag class="input-tag mceNonEditable" title="Razón Social" data-text="#companyInvoiceDoor#">Puerta razón social</avttag> <avttag class="input-tag mceNonEditable" title="Gestor de alojamientos" data-text="#companyCity#">Ciudad</avttag>, (<avttag class="input-tag mceNonEditable" title="Gestor de alojamientos" data-text="#companyPostCode#">Código postal</avttag>)<avttag class="input-tag mceNonEditable" title="Gestor de alojamientos" data-text="#companyCountry#">País</avttag></p>

</td>

</tr>

</tbody>

</table>

<p><avttag class="input-tag mceNonEditable" title="Reserva" data-text="#bookingDepositAccomodation#">Fianza de la reserva</avttag></p>

</body>

Spanish:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<style>

* {

-ms-text-size-adjust: 100%;

-webkit-text-size-adjust: 100%;

}

body {

margin: 0;

padding: 0;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

background-color: #ffffff;

width: 100% !important;

height: 100% !important;

}

h1 {

color: #b6d7a8/*colorCorporativo*/;

font-size: 18px;

font-weight: bold;

line-height: 26px;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

margin: 0px;

}

#tinymce h2 {

color: #393939;

font-size: 18px;

font-weight: bold;

letter-spacing: 0.24px;

line-height: 24px;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

}

h3 {

margin: 0;

margin-bottom: 5px;

margin-top: 3px;

padding: 0;

font-size: 14px;

line-height: 23px;

font-weight: normal;

color: #393939;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

}

h4 {

color: #9B9B9B;

font-size: 13px;

letter-spacing: 0.17px;

line-height: 18px;

font-weight: normal;

margin: 0px;

text-align: justify;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

}

h5 {

margin: 0px;

padding: 0;

font-size: 12px;

line-height: 20px;

font-weight: 600;

color: #393939;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

}

h6 {

margin: 0;

padding: 0;

font-size: 12px;

font-weight: normal;

color: #2c333c;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

}

.colorLogoActivoBorder {

border-top: 9px solid #b6d7a8!important;

}

.backgroundCorporativo {

background-color:#b6d7a8!important;

}

.bordesGrises{

border-left: 10px solid #ebecee;

border-right: 10px solid #ebecee;

border-bottom: 10px solid #ebecee;

}

.blockEmail, .blockEmailNoResponsive, .tableDefault {

background: white;

border-collapse: initial;

padding-left: 40px;

padding-right:40px;

padding-bottom: 25px;

}

.blockTitle {

padding-top: 20px;

padding-bottom:20px;

}

.noPaddingTable tr td {

padding: 0px!important;

}

.doubleColumn {

width:50%

}

ul {

padding-left: 5px;

margin-top: 0px;

}

.title {

font-size: 22px!important;

}

.subtitle {

font-size: 14px!important;

}

@media (max-width: 767px) and (orientation: landscape) {

table.blockEmail { width: 100%!important; }

}

@media (min-width: 650px) {

#principal {

min-width: 650px;

max-width: 650px;

}

@media screen and (max-width: 600px) {

h1,h2 { font-size: 30px!important}

h3,.title { font-size: 25px!important}

h4,h5,h6,.subtitle { font-size: 20px!important }

ul, p, em { font-size: 20px!important}

table.blockEmail, table.tableDefault { width: 100%!important; }

thead {

display: none;

}

tr:nth-of-type(2n) {

background-color: inherit;

}

table.blockEmail tbody td {

display: block;

}

table.blockEmail tbody td:before {

content: attr(data-th);

display: block;

}

table.tableDefault tbody td {

display: table-cell!important;

}

table.tableDefault tbody td:before {

content: none!important;

display: initial!important;

}

.blockTitle {

padding-left: 20px!important;

padding-top: 20px!important;

padding-bottom:20px;

}

.noPaddingTable {

margin: 0px!important;

}

.doubleColumn img {

width: 100%!important;

}

.doubleColumn {

width: 100%!important;

padding-left: 0px!important;

margin: 0px!important;

padding-bottom: 10px!important;

padding-top: 10px!important;

}

.doubleColumn table tr td {

padding-left: 20px!important;

}

.blockEmail, .blockEmailNoResponsive, .tableDefault {

background: white;

border-collapse: initial;

padding-left: 20px!important;

padding-right:20px!important;

}

.inlineTable{

display: inline-table!important;

white-space: nowrap;

}

.width10{

width: 10%;

}

.width40{

width: 40%;

}

.width50{

width: 50%;

}

.desgloseResponsive{

font-size: 16px;

padding-left: 20px;

}

.tableCell{

display: table-cell !important;

}

img {

max-width: 100%!important;

}

ul {

padding-left: 50px!important;

}

.blockSimple td, .bloqueDoble td {

padding-left: 20px!important;

}

.bloqueDoble .doubleColumn td {

padding-left: 0px!important;

}

table tr td {

width:auto!important;

height:auto!important;

}

</style>

</head>

<body>

<tbody>

<tbody>

<tr>

<tbody>

</tr>

</tbody>

</table>

<tbody>

<p class="subtitle">Gracias por confiar en nosotros y por realizar su reserva <span class="editandoNoEditable"><avttag class="input-tag mceNonEditable" title="Reserva" data-text="#locator#">Localizador</avttag></span>. </p>

<p class="subtitle">Tal y como se indicó en el momento de la reserva, todavía está pendiente el pago del depósito de seguridad por un importe de <span class="editandoNoEditable"><avttag class="input-tag mceNonEditable" title="Reserva" data-text="#bookingDepositAccomodation#">Fianza de la reserva</avttag></span>.</p>

<p class="subtitle">Para facilitar este proceso, utilizamos Swikly, un servicio online seguro que permite gestionar el depósito sin afectar al límite de pago de su tarjeta.</p>

<p class="subtitle">Por favor, haga clic en el siguiente botón para completar el depósito de seguridad:</p>

<p class="subtitle">Si necesita más información o ayuda, no dude en ponerse en contacto con nosotros.</p>

</td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<p class="atentamente">Esperamos darle la bienvenida muy pronto.</p>

<p class="atentamente">Atentamente</p>

<p class="atentamente"><br /> <avttag class="input-tag mceNonEditable" title="Gestor de alojamientos" data-text="#companyName#">Nombre</avttag> </p>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

<br />

</td>

</tr>

</tbody>

</table>

<p><avttag class="input-tag mceNonEditable" title="Reserva" data-text="#bookingDepositAccomodation#">Fianza de la reserva</avttag></p>

</body>

French:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<style>

* {

-ms-text-size-adjust: 100%;

-webkit-text-size-adjust: 100%;

}

body {

margin: 0;

padding: 0;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

background-color: #ffffff;

width: 100% !important;

height: 100% !important;

}

h1 {

color: #b6d7a8/*colorCorporativo*/;

font-size: 18px;

font-weight: bold;

line-height: 26px;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

margin: 0px;

}

#tinymce h2 {

color: #393939;

font-size: 18px;

font-weight: bold;

letter-spacing: 0.24px;

line-height: 24px;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

}

h3 {

margin: 0;

margin-bottom: 5px;

margin-top: 3px;

padding: 0;

font-size: 14px;

line-height: 23px;

font-weight: normal;

color: #393939;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

}

h4 {

color: #9B9B9B;

font-size: 13px;

letter-spacing: 0.17px;

line-height: 18px;

font-weight: normal;

margin: 0px;

text-align: justify;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

}

h5 {

margin: 0px;

padding: 0;

font-size: 12px;

line-height: 20px;

font-weight: 600;

color: #393939;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

}

h6 {

margin: 0;

padding: 0;

font-size: 12px;

font-weight: normal;

color: #2c333c;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

}

.colorLogoActivoBorder {

border-top: 9px solid #b6d7a8!important;

}

.backgroundCorporativo {

background-color:#b6d7a8!important;

}

.bordesGrises{

border-left: 10px solid #ebecee;

border-right: 10px solid #ebecee;

border-bottom: 10px solid #ebecee;

}

.blockEmail, .blockEmailNoResponsive, .tableDefault {

background: white;

border-collapse: initial;

padding-left: 40px;

padding-right:40px;

padding-bottom: 25px;

}

.blockTitle {

padding-top: 20px;

padding-bottom:20px;

}

.noPaddingTable tr td {

padding: 0px!important;

}

.doubleColumn {

width:50%

}

ul {

padding-left: 5px;

margin-top: 0px;

}

.title {

font-size: 22px!important;

}

.subtitle {

font-size: 14px!important;

}

@media (max-width: 767px) and (orientation: landscape) {

table.blockEmail { width: 100%!important; }

}

@media (min-width: 650px) {

#principal {

min-width: 650px;

max-width: 650px;

}

@media screen and (max-width: 600px) {

h1,h2 { font-size: 30px!important}

h3,.title { font-size: 25px!important}

h4,h5,h6,.subtitle { font-size: 20px!important }

ul, p, em { font-size: 20px!important}

table.blockEmail, table.tableDefault { width: 100%!important; }

thead {

display: none;

}

tr:nth-of-type(2n) {

background-color: inherit;

}

table.blockEmail tbody td {

display: block;

}

table.blockEmail tbody td:before {

content: attr(data-th);

display: block;

}

table.tableDefault tbody td {

display: table-cell!important;

}

table.tableDefault tbody td:before {

content: none!important;

display: initial!important;

}

.blockTitle {

padding-left: 20px!important;

padding-top: 20px!important;

padding-bottom:20px;

}

.noPaddingTable {

margin: 0px!important;

}

.doubleColumn img {

width: 100%!important;

}

.doubleColumn {

width: 100%!important;

padding-left: 0px!important;

margin: 0px!important;

padding-bottom: 10px!important;

padding-top: 10px!important;

}

.doubleColumn table tr td {

padding-left: 20px!important;

}

.blockEmail, .blockEmailNoResponsive, .tableDefault {

background: white;

border-collapse: initial;

padding-left: 20px!important;

padding-right:20px!important;

}

.inlineTable{

display: inline-table!important;

white-space: nowrap;

}

.width10{

width: 10%;

}

.width40{

width: 40%;

}

.width50{

width: 50%;

}

.desgloseResponsive{

font-size: 16px;

padding-left: 20px;

}

.tableCell{

display: table-cell !important;

}

img {

max-width: 100%!important;

}

ul {

padding-left: 50px!important;

}

.blockSimple td, .bloqueDoble td {

padding-left: 20px!important;

}

.bloqueDoble .doubleColumn td {

padding-left: 0px!important;

}

table tr td {

width:auto!important;

height:auto!important;

}

</style>

</head>

<body>

<tbody>

<tbody>

<tr>

<tbody>

</tr>

</tbody>

</table>

<tbody>

<p class="title"><strong>Bonjour,</strong></p>

<p class="subtitle">Nous vous remercions pour votre confiance et pour votre réservation <avttag class="input-tag mceNonEditable" title="Reserva" data-text="#locator#">Localizador</avttag>. </p>

<p class="subtitle">Comme indiqué au moment de la réservation, le dépôt de garantie d’un montant de <avttag class="input-tag mceNonEditable" title="Reserva" data-text="#bookingDepositAccomodation#">Fianza de la reserva</avttag> reste à effectuer.</p>

<p class="subtitle">Afin de faciliter cette démarche, nous utilisons Swikly, un service en ligne sécurisé qui vous permet de déposer votre garantie sans impacter le plafond de paiement de votre carte bancaire.</p>

<p class="subtitle">Veuillez cliquer sur le bouton ci-dessous pour effectuer le dépôt de garantie :</p>

<p class="subtitle">Nous restons à votre disposition pour toute information complémentaire ou assistance.</p>

<p class="subtitle"><a id="botonPersonalizado" style="background-color: #b6d7a8!important; height: 30px; width: 158px; border-radius: 4px; border: 0px; box-shadow: 02px10px0rgba(0,0,0,0.16); color: white; font-weight: bold; cursor: pointer; margin-top: 25px; margin-bottom: 30px; text-decoration: none; text-transform: uppercase; text-align: center; font-size: 14px; padding: 7px 15px 7px 15px;" rel="noopener" href="https://avantio.swikly.com/[ACCOUNT_ID_AVANTIO]/secure/#IdBooking#" target="_blank">Cliquez ici</a></p>

</td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<p class="atentamente">Au plaisir de vous accueillir prochainement.</p>

<p class="atentamente"><span>Cordialement,</span></p>

<p class="atentamente"><br /> <avttag class="input-tag mceNonEditable" title="Gestor de alojamientos" data-text="#companyName#">Nombre</avttag> </p>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

<br />

</td>

</tr>

</tbody>

</table>

<p><avttag class="input-tag mceNonEditable" title="Reserva" data-text="#bookingDepositAccomodation#">Fianza de la reserva</avttag></p>

</body>

Italian:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<style>

* {

-ms-text-size-adjust: 100%;

-webkit-text-size-adjust: 100%;

}

body {

margin: 0;

padding: 0;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

background-color: #ffffff;

width: 100% !important;

height: 100% !important;

}

h1 {

color: #b6d7a8/*colorCorporativo*/;

font-size: 18px;

font-weight: bold;

line-height: 26px;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

margin: 0px;

}

#tinymce h2 {

color: #393939;

font-size: 18px;

font-weight: bold;

letter-spacing: 0.24px;

line-height: 24px;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

}

h3 {

margin: 0;

margin-bottom: 5px;

margin-top: 3px;

padding: 0;

font-size: 14px;

line-height: 23px;

font-weight: normal;

color: #393939;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

}

h4 {

color: #9B9B9B;

font-size: 13px;

letter-spacing: 0.17px;

line-height: 18px;

font-weight: normal;

margin: 0px;

text-align: justify;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

}

h5 {

margin: 0px;

padding: 0;

font-size: 12px;

line-height: 20px;

font-weight: 600;

color: #393939;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

}

h6 {

margin: 0;

padding: 0;

font-size: 12px;

font-weight: normal;

color: #2c333c;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

}

.colorLogoActivoBorder {

border-top: 9px solid #b6d7a8!important;

}

.backgroundCorporativo {

background-color:#b6d7a8!important;

}

.bordesGrises{

border-left: 10px solid #ebecee;

border-right: 10px solid #ebecee;

border-bottom: 10px solid #ebecee;

}

.blockEmail, .blockEmailNoResponsive, .tableDefault {

background: white;

border-collapse: initial;

padding-left: 40px;

padding-right:40px;

padding-bottom: 25px;

}

.blockTitle {

padding-top: 20px;

padding-bottom:20px;

}

.noPaddingTable tr td {

padding: 0px!important;

}

.doubleColumn {

width:50%

}

ul {

padding-left: 5px;

margin-top: 0px;

}

.title {

font-size: 22px!important;

}

.subtitle {

font-size: 14px!important;

}

@media (max-width: 767px) and (orientation: landscape) {

table.blockEmail { width: 100%!important; }

}

@media (min-width: 650px) {

#principal {

min-width: 650px;

max-width: 650px;

}

@media screen and (max-width: 600px) {

h1,h2 { font-size: 30px!important}

h3,.title { font-size: 25px!important}

h4,h5,h6,.subtitle { font-size: 20px!important }

ul, p, em { font-size: 20px!important}

table.blockEmail, table.tableDefault { width: 100%!important; }

thead {

display: none;

}

tr:nth-of-type(2n) {

background-color: inherit;

}

table.blockEmail tbody td {

display: block;

}

table.blockEmail tbody td:before {

content: attr(data-th);

display: block;

}

table.tableDefault tbody td {

display: table-cell!important;

}

table.tableDefault tbody td:before {

content: none!important;

display: initial!important;

}

.blockTitle {

padding-left: 20px!important;

padding-top: 20px!important;

padding-bottom:20px;

}

.noPaddingTable {

margin: 0px!important;

}

.doubleColumn img {

width: 100%!important;

}

.doubleColumn {

width: 100%!important;

padding-left: 0px!important;

margin: 0px!important;

padding-bottom: 10px!important;

padding-top: 10px!important;

}

.doubleColumn table tr td {

padding-left: 20px!important;

}

.blockEmail, .blockEmailNoResponsive, .tableDefault {

background: white;

border-collapse: initial;

padding-left: 20px!important;

padding-right:20px!important;

}

.inlineTable{

display: inline-table!important;

white-space: nowrap;

}

.width10{

width: 10%;

}

.width40{

width: 40%;

}

.width50{

width: 50%;

}

.desgloseResponsive{

font-size: 16px;

padding-left: 20px;

}

.tableCell{

display: table-cell !important;

}

img {

max-width: 100%!important;

}

ul {

padding-left: 50px!important;

}

.blockSimple td, .bloqueDoble td {

padding-left: 20px!important;

}

.bloqueDoble .doubleColumn td {

padding-left: 0px!important;

}

table tr td {

width:auto!important;

height:auto!important;

}

</style>

</head>

<body>

<tbody>

<tbody>

<tr>

<tbody>

</tr>

</tbody>

</table>

<tbody>

<p class="title"><strong>Buongiorno,</strong></p>

<p class="subtitle">La ringraziamo per la fiducia accordataci e per la sua prenotazione <avttag class="input-tag mceNonEditable" title="Reserva" data-text="#locator#">Localizador</avttag>. </p>

<p class="subtitle">Come indicato al momento della prenotazione, il deposito cauzionale di <avttag class="input-tag mceNonEditable" title="Reserva" data-text="#bookingDepositAccomodation#">Fianza de la reserva</avttag> risulta ancora da effettuare.</p>

<p class="subtitle">Per semplificare la procedura, utilizziamo Swikly, un servizio online sicuro che consente di versare il deposito cauzionale senza incidere sul limite di pagamento della carta bancaria.</p>

<p class="subtitle">La invitiamo a cliccare sul pulsante qui sotto per completare il deposito cauzionale:</p>

<p class="subtitle">Restiamo a sua disposizione per qualsiasi ulteriore informazione o assistenza.</p>

<p class="subtitle"><a id="botonPersonalizado" style="background-color: #b6d7a8!important; height: 30px; width: 158px; border-radius: 4px; border: 0px; box-shadow: 02px10px0rgba(0,0,0,0.16); color: white; font-weight: bold; cursor: pointer; margin-top: 25px; margin-bottom: 30px; text-decoration: none; text-transform: uppercase; text-align: center; font-size: 14px; padding: 7px 15px 7px 15px;" rel="noopener" href="https://avantio.swikly.com/[ACCOUNT_ID_AVANTIO]/secure/#IdBooking#" target="_blank">Clicchi qui</a></p>

</td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<p class="atentamente">Saremo lieti di accoglierla presto.</p>

<p class="atentamente"><span>Cordiali saluti,</span></p>

<p class="atentamente"><br /> <avttag class="input-tag mceNonEditable" title="Gestor de alojamientos" data-text="#companyName#">Nombre</avttag> </p>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

<br />

</td>

</tr>

</tbody>

</table>

<p><avttag class="input-tag mceNonEditable" title="Reserva" data-text="#bookingDepositAccomodation#">Fianza de la reserva</avttag></p>

</body>

Portuguese:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<style>

* {

-ms-text-size-adjust: 100%;

-webkit-text-size-adjust: 100%;

}

body {

margin: 0;

padding: 0;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

background-color: #ffffff;

width: 100% !important;

height: 100% !important;

}

h1 {

color: #b6d7a8/*colorCorporativo*/;

font-size: 18px;

font-weight: bold;

line-height: 26px;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

margin: 0px;

}

#tinymce h2 {

color: #393939;

font-size: 18px;

font-weight: bold;

letter-spacing: 0.24px;

line-height: 24px;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

}

h3 {

margin: 0;

margin-bottom: 5px;

margin-top: 3px;

padding: 0;

font-size: 14px;

line-height: 23px;

font-weight: normal;

color: #393939;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

}

h4 {

color: #9B9B9B;

font-size: 13px;

letter-spacing: 0.17px;

line-height: 18px;

font-weight: normal;

margin: 0px;

text-align: justify;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

}

h5 {

margin: 0px;

padding: 0;

font-size: 12px;

line-height: 20px;

font-weight: 600;

color: #393939;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

}

h6 {

margin: 0;

padding: 0;

font-size: 12px;

font-weight: normal;

color: #2c333c;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

}

.colorLogoActivoBorder {

border-top: 9px solid #b6d7a8!important;

}

.backgroundCorporativo {

background-color:#b6d7a8!important;

}

.bordesGrises{

border-left: 10px solid #ebecee;

border-right: 10px solid #ebecee;

border-bottom: 10px solid #ebecee;

}

.blockEmail, .blockEmailNoResponsive, .tableDefault {

background: white;

border-collapse: initial;

padding-left: 40px;

padding-right:40px;

padding-bottom: 25px;

}

.blockTitle {

padding-top: 20px;

padding-bottom:20px;

}

.noPaddingTable tr td {

padding: 0px!important;

}

.doubleColumn {

width:50%

}

ul {

padding-left: 5px;

margin-top: 0px;

}

.title {

font-size: 22px!important;

}

.subtitle {

font-size: 14px!important;

}

@media (max-width: 767px) and (orientation: landscape) {

table.blockEmail { width: 100%!important; }

}

@media (min-width: 650px) {

#principal {

min-width: 650px;

max-width: 650px;

}

@media screen and (max-width: 600px) {

h1,h2 { font-size: 30px!important}

h3,.title { font-size: 25px!important}

h4,h5,h6,.subtitle { font-size: 20px!important }

ul, p, em { font-size: 20px!important}

table.blockEmail, table.tableDefault { width: 100%!important; }

thead {

display: none;

}

tr:nth-of-type(2n) {

background-color: inherit;

}

table.blockEmail tbody td {

display: block;

}

table.blockEmail tbody td:before {

content: attr(data-th);

display: block;

}

table.tableDefault tbody td {

display: table-cell!important;

}

table.tableDefault tbody td:before {

content: none!important;

display: initial!important;

}

.blockTitle {

padding-left: 20px!important;

padding-top: 20px!important;

padding-bottom:20px;

}

.noPaddingTable {

margin: 0px!important;

}

.doubleColumn img {

width: 100%!important;

}

.doubleColumn {

width: 100%!important;

padding-left: 0px!important;

margin: 0px!important;

padding-bottom: 10px!important;

padding-top: 10px!important;

}

.doubleColumn table tr td {

padding-left: 20px!important;

}

.blockEmail, .blockEmailNoResponsive, .tableDefault {

background: white;

border-collapse: initial;

padding-left: 20px!important;

padding-right:20px!important;

}

.inlineTable{

display: inline-table!important;

white-space: nowrap;

}

.width10{

width: 10%;

}

.width40{

width: 40%;

}

.width50{

width: 50%;

}

.desgloseResponsive{

font-size: 16px;

padding-left: 20px;

}

.tableCell{

display: table-cell !important;

}

img {

max-width: 100%!important;

}

ul {

padding-left: 50px!important;

}

.blockSimple td, .bloqueDoble td {

padding-left: 20px!important;

}

.bloqueDoble .doubleColumn td {

padding-left: 0px!important;

}

table tr td {

width:auto!important;

height:auto!important;

}

</style>

</head>

<body>

<tbody>

<tbody>

<tr>

<tbody>

</tr>

</tbody>

</table>

<tbody>

<p class="subtitle">Agradecemos a sua confiança e a sua reserva <avttag class="input-tag mceNonEditable" title="Reserva" data-text="#locator#">Localizador</avttag>. </p>

<p class="subtitle">Conforme indicado no momento da reserva, a caução no valor de <avttag class="input-tag mceNonEditable" title="Reserva" data-text="#bookingDepositAccomodation#">Fianza de la reserva</avttag> ainda se encontra pendente.</p>

<p class="subtitle">Para facilitar este processo, utilizamos a Swikly, um serviço online seguro que lhe permite efetuar a caução sem afetar o limite de pagamento do seu cartão bancário.</p>

<p class="subtitle">Por favor, clique no botão abaixo para concluir o pagamento da caução:</p>

<p class="subtitle">Permanecemos à sua disposição para qualquer informação adicional ou assistência.</p>

<p class="subtitle"><a id="botonPersonalizado" style="background-color: #b6d7a8!important; height: 30px; width: 158px; border-radius: 4px; border: 0px; box-shadow: 02px10px0rgba(0,0,0,0.16); color: white; font-weight: bold; cursor: pointer; margin-top: 25px; margin-bottom: 30px; text-decoration: none; text-transform: uppercase; text-align: center; font-size: 14px; padding: 7px 15px 7px 15px;" rel="noopener" href="https://avantio.swikly.com/[ACCOUNT_ID_AVANTIO]/secure/#IdBooking#" target="_blank">Clique aqui</a></p>

</td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<p class="atentamente">Esperamos recebê-lo em breve.</p>

<p class="atentamente">Com os melhores cumprimentos,</p>

<p class="atentamente"><br /> <avttag class="input-tag mceNonEditable" title="Gestor de alojamientos" data-text="#companyName#">Nombre</avttag> </p>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

<br />

</td>

</tr>

</tbody>

</table>

<p><avttag class="input-tag mceNonEditable" title="Reserva" data-text="#bookingDepositAccomodation#">Fianza de la reserva</avttag></p>

</body>

German:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<style>

* {

-ms-text-size-adjust: 100%;

-webkit-text-size-adjust: 100%;

}

body {

margin: 0;

padding: 0;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

background-color: #ffffff;

width: 100% !important;

height: 100% !important;

}

h1 {

color: #b6d7a8/*colorCorporativo*/;

font-size: 18px;

font-weight: bold;

line-height: 26px;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

margin: 0px;

}

#tinymce h2 {

color: #393939;

font-size: 18px;

font-weight: bold;

letter-spacing: 0.24px;

line-height: 24px;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

}

h3 {

margin: 0;

margin-bottom: 5px;

margin-top: 3px;

padding: 0;

font-size: 14px;

line-height: 23px;

font-weight: normal;

color: #393939;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

}

h4 {

color: #9B9B9B;

font-size: 13px;

letter-spacing: 0.17px;

line-height: 18px;

font-weight: normal;

margin: 0px;

text-align: justify;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

}

h5 {

margin: 0px;

padding: 0;

font-size: 12px;

line-height: 20px;

font-weight: 600;

color: #393939;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

}

h6 {

margin: 0;

padding: 0;

font-size: 12px;

font-weight: normal;

color: #2c333c;

font-family: 'Montserrat',Open Sans, Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;

}

.colorLogoActivoBorder {

border-top: 9px solid #b6d7a8!important;

}

.backgroundCorporativo {

background-color:#b6d7a8!important;

}

.bordesGrises{

border-left: 10px solid #ebecee;

border-right: 10px solid #ebecee;

border-bottom: 10px solid #ebecee;

}

.blockEmail, .blockEmailNoResponsive, .tableDefault {

background: white;

border-collapse: initial;

padding-left: 40px;

padding-right:40px;

padding-bottom: 25px;

}

.blockTitle {

padding-top: 20px;

padding-bottom:20px;

}

.noPaddingTable tr td {

padding: 0px!important;

}

.doubleColumn {

width:50%

}

ul {

padding-left: 5px;

margin-top: 0px;

}

.title {

font-size: 22px!important;

}

.subtitle {

font-size: 14px!important;

}

@media (max-width: 767px) and (orientation: landscape) {

table.blockEmail { width: 100%!important; }

}

@media (min-width: 650px) {

#principal {

min-width: 650px;

max-width: 650px;

}

@media screen and (max-width: 600px) {

h1,h2 { font-size: 30px!important}

h3,.title { font-size: 25px!important}

h4,h5,h6,.subtitle { font-size: 20px!important }

ul, p, em { font-size: 20px!important}

table.blockEmail, table.tableDefault { width: 100%!important; }

thead {

display: none;

}

tr:nth-of-type(2n) {

background-color: inherit;

}

table.blockEmail tbody td {

display: block;

}

table.blockEmail tbody td:before {

content: attr(data-th);

display: block;

}

table.tableDefault tbody td {

display: table-cell!important;

}

table.tableDefault tbody td:before {

content: none!important;

display: initial!important;

}

.blockTitle {

padding-left: 20px!important;

padding-top: 20px!important;

padding-bottom:20px;

}

.noPaddingTable {

margin: 0px!important;

}

.doubleColumn img {

width: 100%!important;

}

.doubleColumn {

width: 100%!important;

padding-left: 0px!important;

margin: 0px!important;

padding-bottom: 10px!important;

padding-top: 10px!important;

}

.doubleColumn table tr td {

padding-left: 20px!important;

}

.blockEmail, .blockEmailNoResponsive, .tableDefault {

background: white;

border-collapse: initial;

padding-left: 20px!important;

padding-right:20px!important;

}

.inlineTable{

display: inline-table!important;

white-space: nowrap;

}

.width10{

width: 10%;

}

.width40{

width: 40%;

}

.width50{

width: 50%;

}

.desgloseResponsive{

font-size: 16px;

padding-left: 20px;

}

.tableCell{

display: table-cell !important;

}

img {

max-width: 100%!important;

}

ul {

padding-left: 50px!important;

}

.blockSimple td, .bloqueDoble td {

padding-left: 20px!important;

}

.bloqueDoble .doubleColumn td {

padding-left: 0px!important;

}

table tr td {

width:auto!important;

height:auto!important;

}

</style>

</head>

<body>

<tbody>

<tbody>

<tr>

<tbody>

</tr>

</tbody>

</table>

<tbody>

<p class="title"><strong>Guten Tag,</strong></p>

<p class="subtitle">vielen Dank für Ihr Vertrauen und für Ihre Reservierung <avttag class="input-tag mceNonEditable" title="Reserva" data-text="#locator#">Localizador</avttag>. </p>

<p class="subtitle">Wie zum Zeitpunkt der Buchung angegeben, ist die Kaution in Höhe von <avttag class="input-tag mceNonEditable" title="Reserva" data-text="#bookingDepositAccomodation#">Fianza de la reserva</avttag> noch zu hinterlegen.</p>

<p class="subtitle">Um diesen Vorgang zu vereinfachen, nutzen wir Swikly, einen sicheren Online-Service, mit dem Sie die Kaution hinterlegen können, ohne das Zahlungslimit Ihrer Bankkarte zu belasten.</p>

<p class="subtitle">Bitte klicken Sie auf die folgende Schaltfläche, um die Kaution zu hinterlegen:</p>

<p class="subtitle">Für weitere Informationen oder Unterstützung stehen wir Ihnen gerne zur Verfügung.</p>

</td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<p class="atentamente">Wir freuen uns darauf, Sie bald bei uns begrüßen zu dürfen.</p>

<p class="atentamente"><span>Mit freundlichen Grüßen,</span></p>

<p class="atentamente"><br /> <avttag class="input-tag mceNonEditable" title="Gestor de alojamientos" data-text="#companyName#">Nombre</avttag> </p>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

<br />

</td>

</tr>

</tbody>

</table>

<p><avttag class="input-tag mceNonEditable" title="Reserva" data-text="#bookingDepositAccomodation#">Fianza de la reserva</avttag></p>

</body>

Frequently Asked Questions

Is it necessary to use the source code proposed by Avantio?

No, it is not mandatory. However, the source code must include the following URL:

https://avantio.swikly.com/[ACCOUNT_ID_AVANTIO]/secure/#IdBooking#

In this URL, it is mandatory to replace the [ACCOUNT_ID_AVANTIO] field with the value shown in the “USER” column of your API Keys.

How to configure the Swikly email template in Avantio

Prepare the email template

Source code provided by Avantio

English:

Spanish:

French:

Italian:

Portuguese:

German:

Frequently Asked Questions

Is it necessary to use the source code proposed by Avantio?