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.
The page embedding the button must be secured with SSL (i.e., https: not http:). You can install a free SSL certificate.
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 the "Referral Settings" sub-menu.
- In the services list, find the service that you want to create an embed button for
- For that service, Set Sign-ups Enabled=Yes
- For that service, click the </> Embed Code button
- 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 button
- Click 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:
(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.