Impostazioni

Automazioni, template email e comportamento globale del CRM.

Solleciti pagamento Template email Documenti PDF Cancellazioni Checkout

Conferma di prenotazione

brochure

Variabili documento

Valori anteprima

company_legal_namecompany_emailcompany_websitecompany_phonetrip_titletrip_subtitlecover_image_urlduration_labelduration_daysduration_nightstraveler_nametraveler_first_namebooking_referencedeparture_datereturn_datedeparture_rangeissued_atparticipants_countcapacity_totalgroup_size_labelleader_nameleader_bioleader_photo_urlleaderstrip_pricetaxes_labeltrip_totalpaid_totaloutstanding_amountpayment_status_labeloverview_textinclusions_htmlitinerary_htmlmoments_htmlrequirements_html

Variabili sopra ↑

Editor HTML

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8" />
<style>
  @import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;700;800&family=Figtree:wght@400;500;600;700&display=swap");
  @page { size: A4; margin: 0; }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .page { width: 210mm; height: 297mm; overflow: hidden; font-family: "Figtree", sans-serif; color: #3A2415; background: #F4EEE3; display: flex; flex-direction: column; position: relative; }
  .page.first { page-break-after: always; }
  .h { font-family: "Bricolage Grotesque", sans-serif; letter-spacing: -.5px; }
  .inc-item { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: #5A4632; margin-bottom: 9px; }
  .inc-check { color: #2E9E5B; font-weight: 800; flex: 0 0 auto; }
  .moment { margin: 0; border-radius: 12px; overflow: hidden; height: 92px; background: #E7DAC6; }
  .moment-img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .moment-cap { display: none; }
  .itin-item { display: flex; gap: 12px; padding-bottom: 14px; position: relative; }
  .itin-item:last-child { padding-bottom: 0; }
  .itin-dot { width: 11px; height: 11px; border-radius: 50%; background: #EE5A1B; flex: 0 0 auto; margin-top: 3px; position: relative; }
  .itin-item:last-child .itin-dot { background: #2E9E5B; }
  .itin-item:not(:last-child) .itin-dot::after { content: ""; position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 2px; bottom: -17px; background: #EAD9C3; }
  .itin-day { font-weight: 700; font-size: 13px; color: #2C1B0E; }
  .itin-desc { font-size: 12px; color: #8A7156; }
  .req-item { background: #FFF6EF; border: 1px solid #F3D9C6; border-radius: 14px; padding: 16px 18px; margin-top: 4px; }
  .req-title { font-weight: 700; font-size: 14px; color: #CF470F; margin-bottom: 8px; }
  .req-text { font-size: 12.5px; line-height: 1.55; color: #7A6752; margin: 0; }
</style>
</head>
<body>
<section class="page first">
  <div style="position:relative;height:52%;">
    <img src="{cover_image_url}" alt="" style="width:100%;height:100%;object-fit:cover;" />
    <div style="position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,10,40,.05) 40%,rgba(20,10,40,.62));"></div>
    <div style="position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:34px 44px;">
      <div style="display:flex;align-items:center;gap:11px;">
        <svg width="40" height="40" viewBox="0 0 40 40" fill="none"><ellipse cx="21" cy="24" rx="13" ry="11" fill="#FBB40E"></ellipse><circle cx="14" cy="15" r="7.5" fill="#FBB40E"></circle><path d="M7 15 L1 13.5 L6.5 18.5 Z" fill="#EE9A00"></path><circle cx="12.5" cy="14" r="1.6" fill="#231407"></circle></svg>
        <span class="h" style="font-weight:800;font-size:27px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.35);">GiàLoFly</span>
      </div>
      <span style="background:rgba(255,255,255,.94);color:#2C1B0E;font-weight:700;font-size:13px;padding:8px 15px;border-radius:30px;">Conferma di prenotazione</span>
    </div>
    <div style="position:absolute;left:44px;bottom:34px;right:44px;">
      <div style="display:inline-flex;align-items:center;gap:8px;background:rgba(238,90,27,.95);color:#fff;font-weight:700;font-size:13px;padding:7px 14px;border-radius:30px;margin-bottom:14px;">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
        Prenotazione confermata
      </div>
      <div class="h" style="font-weight:800;font-size:52px;line-height:.98;color:#fff;text-shadow:0 3px 16px rgba(0,0,0,.4);">{trip_title}</div>
      <div style="font-weight:600;font-size:18px;color:#FBD9C4;margin-top:8px;text-shadow:0 2px 8px rgba(0,0,0,.4);">{trip_subtitle} · {duration_label}</div>
    </div>
  </div>
  <div style="flex:1;padding:34px 44px 30px;display:flex;flex-direction:column;">
    <p style="margin:0 0 22px;font-size:15px;line-height:1.6;color:#5A4632;max-width:560px;">Ciao <b style="color:#2C1B0E;">{traveler_first_name}</b>, la tua avventura è ufficialmente confermata! Questo documento riepiloga il tuo viaggio. Tienilo a portata di mano — trovi tutto ciò che ti serve qui sotto.</p>
    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:14px;">
      <div style="background:#FFFDF9;border:1px solid #EAE0CE;border-radius:16px;padding:18px 20px;">
        <div style="display:flex;align-items:center;gap:8px;color:#EE5A1B;margin-bottom:10px;"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#EE5A1B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"></rect><path d="M16 2v4M8 2v4M3 10h18"></path></svg><span style="font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#A08D78;">Partenza</span></div>
        <div class="h" style="font-weight:800;font-size:19px;color:#2C1B0E;">{departure_date}</div>
        <div style="font-size:13px;color:#8A7156;margin-top:3px;">Rientro {return_date}</div>
      </div>
      <div style="background:#FFFDF9;border:1px solid #EAE0CE;border-radius:16px;padding:18px 20px;">
        <div style="display:flex;align-items:center;gap:8px;color:#EE5A1B;margin-bottom:10px;"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#EE5A1B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path></svg><span style="font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#A08D78;">Gruppo</span></div>
        <div class="h" style="font-weight:800;font-size:19px;color:#2C1B0E;">{participants_count} partecipanti</div>
        <div style="font-size:13px;color:#8A7156;margin-top:3px;">Max {capacity_total} · {group_size_label}</div>
      </div>
      <div style="background:#FFFDF9;border:1px solid #EAE0CE;border-radius:16px;padding:18px 20px;">
        <div style="display:flex;align-items:center;gap:8px;color:#EE5A1B;margin-bottom:10px;"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#EE5A1B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"></rect><path d="M3 10h18"></path></svg><span style="font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#A08D78;">Codice</span></div>
        <div class="h" style="font-weight:800;font-size:19px;color:#2C1B0E;letter-spacing:.5px;">{booking_reference}</div>
        <div style="font-size:13px;color:#8A7156;margin-top:3px;">Riferimento prenotazione</div>
      </div>
    </div>
    <div style="margin-top:18px;background:linear-gradient(135deg,#FFF6EF,#FCEFE3);border:1px solid #F3D9C6;border-radius:18px;padding:20px 22px;display:flex;align-items:center;gap:20px;">
      <div style="width:78px;height:78px;border-radius:16px;overflow:hidden;flex:0 0 auto;box-shadow:0 4px 12px rgba(238,90,27,.2);">
        <img src="{leader_photo_url}" alt="" style="width:100%;height:100%;object-fit:cover;" />
      </div>
      <div style="flex:1;">
        <div style="font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#B5850E;">Il tuo Trip Leader</div>
        <div class="h" style="font-weight:800;font-size:22px;color:#2C1B0E;margin-top:3px;">{leader_name}</div>
        <p style="margin:6px 0 0;font-size:13.5px;line-height:1.5;color:#7A6752;">{leader_bio}</p>
      </div>
      <div style="text-align:right;flex:0 0 auto;">
        <div style="display:flex;align-items:center;gap:7px;justify-content:flex-end;font-size:13px;font-weight:600;color:#5A4632;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#8A7156" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>{company_phone}</div>
        <div style="display:flex;align-items:center;gap:7px;justify-content:flex-end;font-size:13px;font-weight:600;color:#5A4632;margin-top:8px;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#8A7156" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"></rect><path d="m22 7-10 5L2 7"></path></svg>{company_email}</div>
      </div>
    </div>
  </div>
  <div style="background:#231407;color:#C9B79E;font-size:12px;padding:12px 44px;display:flex;justify-content:space-between;align-items:center;">
    <span>GiàLoFly · Trecentosessanta gradi di viaggio</span>
    <span>Emesso il {issued_at}</span>
  </div>
</section>
<section class="page">
  <div style="padding:38px 44px 0;">
    <div style="display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #EAE0CE;padding-bottom:18px;">
      <div class="h" style="font-weight:800;font-size:28px;color:#2C1B0E;">Il tuo viaggio in dettaglio</div>
      <div style="display:flex;align-items:center;gap:9px;"><svg width="26" height="26" viewBox="0 0 40 40" fill="none"><ellipse cx="21" cy="24" rx="13" ry="11" fill="#FBB40E"></ellipse><circle cx="14" cy="15" r="7.5" fill="#FBB40E"></circle><path d="M7 15 L1 13.5 L6.5 18.5 Z" fill="#EE9A00"></path><circle cx="12.5" cy="14" r="1.6" fill="#231407"></circle></svg><span class="h" style="font-weight:800;font-size:18px;color:#231407;">GiàLoFly</span></div>
    </div>
  </div>
  <div style="flex:1;padding:26px 44px 30px;display:grid;grid-template-columns:1.35fr 1fr;gap:26px;">
    <div style="display:flex;flex-direction:column;gap:20px;">
      <div>
        <div class="h" style="font-weight:800;font-size:17px;color:#2C1B0E;margin-bottom:12px;">Cosa è incluso</div>
        <div style="display:flex;flex-direction:column;">{inclusions_html}</div>
      </div>
      <div>
        <div class="h" style="font-weight:800;font-size:17px;color:#2C1B0E;margin-bottom:12px;">Momenti da non perdere</div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">{moments_html}</div>
      </div>
      {requirements_html}
    </div>
    <div style="display:flex;flex-direction:column;gap:18px;">
      <div style="background:#FFFDF9;border:1px solid #EAE0CE;border-radius:16px;padding:18px 20px;">
        <div class="h" style="font-weight:800;font-size:16px;color:#2C1B0E;margin-bottom:14px;">Itinerario in breve</div>
        <div>{itinerary_html}</div>
      </div>
      <div style="background:#231407;border-radius:16px;padding:20px 22px;color:#fff;">
        <div style="font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#E0A96B;margin-bottom:14px;">Riepilogo pagamento</div>
        <div style="display:flex;justify-content:space-between;font-size:13.5px;color:#D8C6AE;margin-bottom:9px;"><span>Prezzo viaggio</span><span>{trip_price}</span></div>
        <div style="display:flex;justify-content:space-between;font-size:13.5px;color:#D8C6AE;margin-bottom:9px;"><span>Tasse e commissioni</span><span>{taxes_label}</span></div>
        <div style="height:1px;background:#4A3826;margin:12px 0;"></div>
        <div style="display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;"><span class="h" style="font-weight:800;font-size:16px;">Totale</span><span class="h" style="font-weight:800;font-size:22px;color:#FBB40E;">{trip_total}</span></div>
        <div style="background:#2E9E5B;border-radius:10px;padding:9px 14px;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>{payment_status_label}</div>
      </div>
      <div style="text-align:center;font-size:12px;color:#8A7156;line-height:1.5;">Hai domande? Scrivici a <b style="color:#5A4632;">{company_email}</b><br/>o chiama il <b style="color:#5A4632;">{company_phone}</b></div>
    </div>
  </div>
  <div style="background:#231407;color:#C9B79E;font-size:12px;padding:12px 44px;display:flex;justify-content:space-between;align-items:center;">
    <span>Prenotazione {booking_reference} · {trip_title}</span>
    <span>{company_website}</span>
  </div>
</section>
</body>
</html>

Anteprima live

Anteprima PDF

Genera un PDF con i valori di anteprima. Richiede Gotenberg configurato.