Have you recently tried to implement Zocdoc scheduling on your website? If so, you may notice that the documentation out there is slim/non-existent. Here’s how to do an appointment scheduler form for your organization, AND customize the button, AND stay on your website (don’t leave and go to Zoc Doc). You still will need the JS/HTML info that Zoc Doc will give you. But they may not necessarily tell you how to do this.

Zoc Doc Scheduling

Use the following code to make your button. It can be CSS-styled with text or wrap a custom image:

<a style="display:block" href="http://www.zocdoc.com/practice/your-doctors-office-info-followed-by-their-zoc-doc-code" class="zd-plugin" data-type="book-button" data-practice-id="their-zoc-doc-code”>WHATEVER YOU WANT HERE, IMAGE OR STYLED COPY, ETC..</a>

Then, be sure to add the JS code after the anchor tags. This actually loads the Zoc Doc widget:

<script>
 (function (d) {
 var script = d.createElement('script'); script.type = 'text/javascript'; script.async = true;
 script.src = '//offsiteschedule.zocdoc.com/plugin/embed';
 var s = d.getElementsByTagName('script')[0]; s.parentNode.insertBefore(script, s);
 })(document);
</script>

If you want to see an example of where I did this, check out www.waynepdc.com and click on the “Appointments” button in the header area. Contact us for more!

Frequently Asked Questions

Can I customize the Zocdoc appointment scheduler button on my website?

Yes, the Zocdoc button can be fully customized. You can use your image or styled text in the anchor tag and apply CSS to match your website’s branding.

How do I keep the Zocdoc appointment scheduler embedded on my site?

To keep the Zocdoc embedded on your site, use the provided HTML anchor tag with the correct practice ID, followed by their JavaScript embed script. This setup prevents redirecting users to Zocdoc’s website.

Where do I get the HTML and JavaScript for the appointment scheduler?

You’ll receive the required HTML and JavaScript from Zocdoc once you register your practice. This information is necessary to embed the appointment scheduler directly into your site’s code.

Why is my Zocdoc not showing on the website?

If the appointment scheduler isn’t appearing, double-check that the anchor tag includes the correct data-practice-id, and confirm that the JavaScript is placed correctly after the anchor in your HTML.

Is it possible to style the appointment scheduler like a native website element?

Absolutely. You can apply CSS directly to the appointment scheduler anchor tag or wrap it with custom HTML/CSS elements to make it blend seamlessly into your website’s design.