You can add a button to your own website that lets people self-refer or book to your Caredove service, using the same appointment times, forms, and inbox that you are using in Caredove.
This tutorial is targeted at webmasters, and assumes that you have some basic knowledge about building a webpage.
Pre-requisites
The page embedding the button must be secured with SSL (i.e., https: not http:). You can install a free SSL certificate.
Let us know you're embedding it so we can add your site's URL to the approved list, ensuring the process works as seamlessly as possible.
Embed the Button
To add a button to your website, take the following steps in your Caredove account (note: You must have "Organization Administrator" permissions):
Select "Settings" from the top menu
Select "Referrals" from the sub-menu.
Navigate to the services table near the bottom, find the service that you want to create an embed button for.
For that service, Set Sign-ups Enabled = Yes
For that service, select the three-dot menu button on the right hand side. From there, click the </> Embed Settings button.
Under the </> Embed Code section, you can customize your button. You can:
- Restrict the button to a specific domain (e.g., https://www.yoursite.com or * for any domain)
- Set the button's colour
- Set the text that is displayed on the button, which can be different depending on whether there are open time slots or not
- Customize which information is displayed after you click the buttonClick the Preview Button link to try out your new button
Click Copy Code to copy the embed code to your clipboard
Paste the embed code into your website where you want it to display
Tip: It is good practice to move the JS file <script> portion of the embed code into the footer of the page
Tip: If you are embedding multiple buttons onto the same page, you only need to include the JS file <script> portion of the embed code on your page once
Set up Autocomplete
If your service has a service area (home-based services) or uses appointment areas, then users will be asked to enter their address to determine geographic eligibility before they can proceed. To enable autocomplete on this address field, take the following steps:
Get a Google Maps API_KEY from the Google Places API web service
Create a Google Maps project
Set the restrictions for the API_KEY to "HTTP referrers (web sites)"
Specify the domain where you will be using this key in the script tag
Insert the following script into the header of your page(s) with the Caredove button:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=YOUR_API_KEY"></script>
(where YOUR_API_KEY is the key retrieved in step 1)In the Caredove embed code script, set the variable cdconfigObj.country equal to the country that you want to restrict the autocomplete results to. (e.g., "USA", "Canada")
ADVANCED: Override Behaviours
While you can set various behaviours of the embed button through the Caredove interface, you can override some Caredove button behaviours from your website code:
Button Text - Insert the desired button text value in your <button> tags. Note that you will lose the functionality that changes the button text depending on if there are open time slots or not
Theme Colour - In the Caredove embed code script, set the variable cdconfigObj.themeColor equal to the desired colour (hex code, e.g., "#2233HH")
Default Search Address - If your website already knows the address of the user on your page (e.g., through an existing user account process), you can pre-populate the registrant's address into the embed button so that they don't have to fill it out themselves. To set the address field, in the Caredove embed code script, set the variable cdconfigObj.address equal to the desired address
Want to completely change the style of the button on your website? Contact the Caredove team to help provide you with some code customized for your website.