HubSpot HTML module
Partner Spotlight: Hop Software
Table-based, inline-styled and mobile responsive. Paste the code into a HubSpot HTML module, then swap the two placeholder image URLs (logo + headshot) for hosted files.
View raw HTML
<!-- ===== PARTNER SPOTLIGHT: HOP SOFTWARE ===== -->
<!-- Fonts: Inter (fallback Arial/Helvetica). Table-based, inline-styled, mobile + desktop optimised. -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap&family=Manrope:wght@600;700;800&display=swap" rel="stylesheet">
<!--[if !mso]><!-->
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap&family=Manrope:wght@600;700;800&display=swap');
/* Stop email clients auto-linking words (blue underlined text) */
a[x-apple-data-detectors], .unstyled-auto-detected a, .aBn { color:inherit !important; text-decoration:none !important; font-size:inherit !important; font-family:inherit !important; font-weight:inherit !important; line-height:inherit !important; border-bottom:0 !important; }
u + #body a, #MessageViewBody a { color:inherit !important; text-decoration:none !important; font-size:inherit !important; font-family:inherit !important; font-weight:inherit !important; line-height:inherit !important; }
</style>
<!--<![endif]-->
<!-- Preheader (hidden preview text) -->
<div style="display:none;max-height:0;overflow:hidden;mso-hide:all;font-size:1px;line-height:1px;color:#ffffff;">
All the functionality. A fraction of the price. Meet Hop, the PMS built for independent hoteliers. ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
</div>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#f2f4f3;margin:0;padding:0;">
<tr>
<td align="center" style="padding:0;">
<!--[if mso]><table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width:600px;width:100%;margin:0 auto;background-color:#ffffff;font-family:'Inter',Arial,Helvetica,sans-serif;">
<!-- Green gradient masthead -->
<tr>
<td align="center" bgcolor="#55cd9f" style="background-color:#55cd9f;background-image:linear-gradient(90deg,#55cd9f 0%,#75d691 100%);padding:30px 24px;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:96px;">
<v:fill type="gradient" color="#55cd9f" color2="#75d691" angle="90" />
<v:textbox inset="0,0,0,0"><div><![endif]-->
<a href="https://hopxmetadesk.metadesk.pro/" style="text-decoration:none;display:block;"><img src="https://project--aa604308-c82a-4411-8600-a02d7d6b2cdf.lovable.app/__l5e/assets-v1/1970b061-d524-4763-9526-672f771c8e65/metadesk-logo.png" width="312" alt="Metadesk" style="display:block;border:0;outline:none;height:auto;width:100%;max-width:312px;margin:0 auto;"></a>
<div style="font-family:'Manrope','Inter',Arial,Helvetica,sans-serif;font-size:12px;font-weight:700;letter-spacing:3.6px;text-transform:uppercase;color:#f2fff9;padding-top:10px;">
Partner Spotlight
</div>
<!--[if gte mso 9]></div></v:textbox></v:rect><![endif]-->
</td>
</tr>
<!-- Headline -->
<tr>
<td class="px" style="padding:34px 32px 0 32px;">
<h1 class="h1" style="margin:0;font-family:'Manrope','Inter',Arial,Helvetica,sans-serif;font-size:34px;line-height:41px;font-weight:800;letter-spacing:-1px;color:#111413;">
Built for Hoteliers,<br>by Hoteliers.
</h1>
</td>
</tr>
<!-- Partner logo panel -->
<tr>
<td class="px" style="padding:24px 32px 0 32px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#f2f7f5;border-radius:6px;">
<tr>
<td align="center" style="padding:30px 20px;">
<img src="https://project--aa604308-c82a-4411-8600-a02d7d6b2cdf.lovable.app/__l5e/assets-v1/77c2a895-6a03-49c5-a9d8-6dd07238f1f3/hop-logo-rgb.png" width="140" alt="Hop Software" style="display:block;border:0;outline:none;height:auto;max-width:140px;margin:0 auto;">
</td>
</tr>
</table>
</td>
</tr>
<!-- Body copy -->
<tr>
<td class="px" style="padding:24px 32px 0 32px;font-family:'Inter',Arial,Helvetica,sans-serif;font-size:15px;line-height:24px;color:#3f4442;">
<p style="margin:0 0 16px 0;">Meet <strong style="font-weight:700;">Hop Software</strong>, the hospitality management system built for independent hoteliers, PMS, commission-free booking engine, guest CRM, payments and events, all in one place.</p>
<p style="margin:0 0 16px 0;">In today’s competitive hospitality landscape, independent hoteliers can no longer afford to lean on high-commission OTAs and legacy on-site systems to protect their margins, and that is where Hop steps in.</p>
<p style="margin:0;">Its strategic <strong style="font-weight:700;">Metadesk integration</strong> pushes live rates and availability straight to metasearch channels, so together we help hoteliers cut out the middleman, maximise booking profitability and own the guest relationship from the very first click.</p>
</td>
</tr>
<!-- Why Hop -->
<tr>
<td class="px" style="padding:30px 32px 0 32px;">
<h2 class="h2" style="margin:0 0 14px 0;font-family:'Manrope','Inter',Arial,Helvetica,sans-serif;font-size:22px;line-height:30px;font-weight:800;letter-spacing:-0.4px;color:#111413;">
Why Hop Works for<br>Independent Hoteliers:
</h2>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="font-family:'Inter',Arial,Helvetica,sans-serif;font-size:14px;line-height:22px;color:#111413;">
<tr>
<td width="26" valign="top" style="padding:0 0 10px 0;color:#17b978;font-size:15px;font-weight:700;">✓</td>
<td valign="top" style="padding:0 0 10px 0;color:#111413;"><span style="color:#111413;"><strong style="font-weight:700;color:#111413;">All-in-one platform:</strong> PMS, CRM, payments and events without stitching systems together</span></td>
</tr>
<tr>
<td width="26" valign="top" style="padding:0 0 10px 0;color:#17b978;font-size:15px;font-weight:700;">✓</td>
<td valign="top" style="padding:0 0 10px 0;color:#111413;"><span style="color:#111413;"><strong style="font-weight:700;color:#111413;">Commission-free bookings:</strong> a direct booking engine that protects your margin</span></td>
</tr>
<tr>
<td width="26" valign="top" style="padding:0 0 10px 0;color:#17b978;font-size:15px;font-weight:700;">✓</td>
<td valign="top" style="padding:0 0 10px 0;color:#111413;"><span style="color:#111413;"><strong style="font-weight:700;color:#111413;">Metadesk integration:</strong> live rates and availability pushed straight to metasearch</span></td>
</tr>
<tr>
<td width="26" valign="top" style="padding:0;color:#17b978;font-size:15px;font-weight:700;">✓</td>
<td valign="top" style="padding:0;color:#111413;"><span style="color:#111413;"><strong style="font-weight:700;color:#111413;">Own the guest relationship:</strong> from the very first click through to check-out</span></td>
</tr>
</table>
</td>
</tr>
<!-- Quote -->
<tr>
<td class="px" style="padding:28px 32px 0 32px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#f2f7f5;border-left:4px solid #17b978;">
<tr>
<td style="padding:22px 20px;">
<div style="font-family:'Inter',Arial,Helvetica,sans-serif;font-size:16px;line-height:26px;font-weight:600;color:#111413;padding-bottom:16px;">
“Hoteliers shouldn’t have to choose between the tools they need and the budget they have. That’s the gap we built Hop to close.”
</div>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td width="60" style="vertical-align:middle;">
<img src="https://project--d2766fa6-d1e3-415b-b2b1-9ffaff899431.lovable.app/__l5e/assets-v1/09835c0e-3d54-45da-9229-f3e248b8681a/sharon-smith.png" width="48" height="48" alt="Sharon Smith" style="display:block;border-radius:50%;border:2px solid #17b978;">
</td>
<td style="vertical-align:middle;padding-left:12px;">
<div style="font-family:'Inter',Arial,Helvetica,sans-serif;font-size:14px;font-weight:700;color:#111413;">Sharon Smith</div>
<div style="font-family:'Inter',Arial,Helvetica,sans-serif;font-size:12px;color:#6b716e;">Chief Operating Officer, Hop</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Closing + CTA -->
<tr>
<td class="px" style="padding:26px 32px 0 32px;font-family:'Inter',Arial,Helvetica,sans-serif;font-size:15px;line-height:24px;color:#3f4442;">
<p style="margin:0;">See what Hop could do for your property, arrange a walkthrough with the Hop team, or explore the platform at <a href="https://hopsoftware.com" style="color:#0fae86;font-weight:600;text-decoration:none;">hopsoftware.com</a>.</p>
</td>
</tr>
<tr>
<td class="px" align="center" style="padding:24px 32px 0 32px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" class="btnwrap" style="width:auto;">
<tr>
<td align="center" bgcolor="#227079" style="border-radius:26px;">
<a class="btn" href="https://hopxmetadesk.metadesk.pro/" style="display:inline-block;padding:15px 30px;border-radius:26px;font-family:'Manrope','Inter',Arial,Helvetica,sans-serif;font-size:15px;font-weight:700;color:#ffffff;text-decoration:none;">Learn more about Hop + Metadesk</a>
</td>
</tr>
</table>
</td>
</tr>
<tr><td style="height:34px;line-height:34px;font-size:0;"> </td></tr>
<!-- Footer -->
<tr>
<td align="center" style="border-top:1px solid #e6e9e8;padding:26px 24px 32px 24px;">
<a href="https://metadesk.pro/" style="text-decoration:none;"><img src="https://project--aa604308-c82a-4411-8600-a02d7d6b2cdf.lovable.app/__l5e/assets-v1/5d2e853c-6bfd-4617-af05-aff83ffc0d85/metadesk-dark.png" width="130" alt="Metadesk" style="display:block;border:0;outline:none;height:auto;max-width:130px;margin:0 auto 26px auto;"></a>
<div style="font-family:'Inter',Arial,Helvetica,sans-serif;font-size:13px;color:#111413;font-weight:600;">
<a href="https://metadesk.pro/products/" class="fnav" style="color:#111413;text-decoration:none;padding:0 10px;white-space:nowrap;display:inline-block;">Products</a>
<a href="https://metadesk.pro/hotel-metasearch-pricing/" class="fnav" style="color:#111413;text-decoration:none;padding:0 10px;white-space:nowrap;display:inline-block;">See Pricing</a>
<a href="https://meetings.hubspot.com/jhoward18?utm_source=site_navigation&utm_medium=navigation_link&utm_campaign=site_optimization&uuid=7c666a57-c92c-4bea-82d4-861da5892e8f" class="fnav" style="color:#111413;text-decoration:none;padding:0 10px;white-space:nowrap;display:inline-block;">Schedule a Demo</a>
</div>
</td>
</tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td>
</tr>
</table>
<style type="text/css">
@media only screen and (max-width:600px) {
.px { padding-left:20px !important; padding-right:20px !important; }
.h1 { font-size:27px !important; line-height:34px !important; }
.h2 { font-size:20px !important; line-height:28px !important; }
.btnwrap { width:100% !important; }
.btn { display:block !important; text-align:center !important; padding:15px 16px !important; }
.fnav { padding:0 6px !important; font-size:12px !important; white-space:nowrap !important; }
}
</style>