<div class="marketing">
<div class="row">
<div class="col-sm-5 col-xs-12 text-center marketing-copy">
<h2>2 lines of code<br>embeds Acuity into any website</h2>
</div>
<div class="col-sm-7 col-xs-12">
<pre><code><iframe src="https://example.acuityscheduling.com" width="100%" height="800" frameBorder="0"></iframe>
<script src="https://embed.acuityscheduling.com/js/embed.js" type="text/javascript"></script></code></pre>
</div>
</div>
<div class="row">
<div class="col-sm-5 col-xs-12 text-center marketing-copy">
<h2>Acuity's powerful APIs<br>allow for advanced integration</h2>
<a class="btn btn-primary btn-lg" href="https://help.acuityscheduling.com/hc/en-us/requests/new" onclick="ga('custom.send', 'event', 'mtg', 'click', 'Get In Touch');" asdf="123">Have Questions? Let us Know!</a>
</div>
<div class="col-sm-7 col-xs-12">
<pre><code>POST https://acuityscheduling.com/api/v1/appointments
{
"datetime": "2025-03-03T14:00:00-0800",
"appointmentTypeID": 1,
"firstName": "Bob",
"lastName": "McTest",
"email": "[email protected]",
"fields": [{
"id": 1,
"value": "Party time!"
}]
}
>> 200 OK</code></pre>
</div>
</div>
</div>
<footer style="background-color: #222; color: #ccc; padding: 2.5rem; margin-top: auto;">
<!-- This div will act as your 'row' container -->
<div class="row" target="_blank" style="max-width: 80rem; margin-left: auto; margin-right: auto; display: flex; flex-wrap: wrap;">
<!-- Documentation Section -->
<!-- Using col-xs-12 for full width on extra small, col-sm-6 for two columns on small, and col-md-3 for four columns on medium screens and up -->
<div class="col-xs-12 col-sm-6 col-md-3" target="_blank" style="padding: 1rem;">
<section>
<h3 style="font-size: 1.25rem; font-weight: 700; color: #ccc; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid #444;">Documentation</h3>
<ul style="list-style: none; padding: 0; margin: 0; line-height: 1.5;">
<li style="margin-bottom: 0.5rem;"><a href="https://developers.acuityscheduling.com/docs/getting-started" target="_blank" style="color: #ccc; text-decoration: none; transition: color 0.3s ease-in-out; font-size: 1rem;">Getting Started</a></li>
<li style="margin-bottom: 0.5rem;"><a href="https://developers.acuityscheduling.com/docs/embedding" target="_blank" style="color: #ccc; text-decoration: none; transition: color 0.3s ease-in-out; font-size: 1rem;">Embeds and Dynamic Links</a></li>
<li style="margin-bottom: 0.5rem;"><a href="https://developers.acuityscheduling.com/docs/custom-css" target="_blank" style="color: #ccc; text-decoration: none; transition: color 0.3s ease-in-out; font-size: 1rem;">CSS Customization</a></li>
<li style="margin-bottom: 0.5rem;"><a href="https://developers.acuityscheduling.com/docs/getting-started" target="_blank" style="color: #ccc; text-decoration: none; transition: color 0.3s ease-in-out; font-size: 1rem;">View More</a></li>
</ul>
</section>
</div>
<!-- Acuity API Section -->
<div class="col-xs-12 col-sm-6 col-md-3" target="_blank" style="padding: 1rem;">
<section>
<h3 style="font-size: 1.25rem; font-weight: 700; color: #ccc; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid #444;">Acuity API</h3>
<ul style="list-style: none; padding: 0; margin: 0; line-height: 1.5;">
<li style="margin-bottom: 0.5rem;"><a href="https://developers.acuityscheduling.com/reference/quick-start" target="_blank" style="color: #ccc; text-decoration: none; transition: color 0.3s ease-in-out; font-size: 1rem;">Quick Start</a></li>
<li style="margin-bottom: 0.5rem;"><a href="https://developers.acuityscheduling.com/docs/oauth2" target="_blank" style="color: #ccc; text-decoration: none; transition: color 0.3s ease-in-out; font-size: 1rem;">OAuth2</a></li>
<li style="margin-bottom: 0.5rem;"><a href="https://developers.acuityscheduling.com/docs/webhooks" target="_blank" style="color: #ccc; text-decoration: none; transition: color 0.3s ease-in-out; font-size: 1rem;">Webhooks</a></li>
</ul>
</section>
</div>
<!-- Support Section -->
<div class="col-xs-12 col-sm-6 col-md-3" target="_blank" style="padding: 1rem;">
<section>
<h3 style="font-size: 1.25rem; font-weight: 700; color: #ccc; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid #444;">Support</h3>
<ul style="list-style: none; padding: 0; margin: 0; line-height: 1.5;">
<li style="margin-bottom: 0.5rem;"><a href="https://help.acuityscheduling.com/hc/en-us/requests/new" target="_blank" style="color: #ccc; text-decoration: none; transition: color 0.3s ease-in-out; font-size: 1rem;">Email Support</a></li>
<li style="margin-bottom: 0.5rem;"><a href="http://status.acuityscheduling.com/" target="_blank" style="color: #ccc; text-decoration: none; transition: color 0.3s ease-in-out; font-size: 1rem;">Status Page</a></li>
</ul>
</section>
</div>
<!-- Legal Section -->
<div class="col-xs-12 col-sm-6 col-md-3" target="_blank" style="padding: 1rem;">
<section>
<h3 style="font-size: 1.25rem; font-weight: 700; color: #ccc; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid #444;">Legal</h3>
<ul style="list-style: none; padding: 0; margin: 0; line-height: 1.5;">
<li style="margin-bottom: 0.5rem;"><a href="https://www.squarespace.com/developer-terms" target="_blank" style="color: #ccc; text-decoration: none; transition: color 0.3s ease-in-out; font-size: 1rem;">Developer Terms of Use</a></li>
<li style="margin-bottom: 0.5rem;"><a href="https://www.squarespace.com/privacy" target="_blank" style="color: #ccc; text-decoration: none; transition: color 0.3s ease-in-out; font-size: 1rem;">Privacy Policy</a></li>
</ul>
</section>
</div>
</div>
</footer>
