What Is the Booking Widget?
The CaseIndex Booking Widget is a small piece of JavaScript code you paste onto your practice website. Once installed, it adds a floating "Book Appointment" button to every page of your site. When a patient clicks it, a booking form opens as an overlay — they choose the doctor, date, and time slot, fill in their details, and confirm. The booking lands directly in your CaseIndex calendar.
There is nothing your patient needs to download or install. It works on mobile, tablet, and desktop browsers.
One-click Installation
Copy one code snippet, paste it into your website. Works on any platform — WordPress, Wix, custom HTML.
No Double Bookings
Already-booked slots are automatically greyed out. Patients can only pick truly available times.
Google Ads Tracking
Every successful booking fires a conversion event to Google Ads, showing you your exact cost-per-patient.
Who Should Use This?
This feature is designed for clinic owners and doctors who:
- Have an existing practice website and want patients to book directly from it.
- Run Google Ads campaigns to attract new patients and want to know which ads are actually driving bookings.
- Want to reduce no-shows by making the booking path as frictionless as possible.
No website? No problem.
You can also share your public booking link directly — e.g. on WhatsApp, in your Google Business profile, or in social media bios. See the Public Booking Page guide.
Part 1: Install the Widget (5 minutes)
Open the CaseIndex Mobile App → Settings
On the bottom tab bar of the mobile app, tap Settings (the gear icon). Then tap the General tab at the top of the settings screen.
Find "Public Booking Link"
You will see a section labelled "Public Booking Link" that shows your unique booking URL. Below it is a button labelled "Email Website Widget Code".
Tap "Email Website Widget Code"
The system will immediately email the owner's email address (the email used to create the CaseIndex account) with the ready-to-use widget code snippet.
Tip: Set up tracking IDs before emailing
If you plan to use Google Ads tracking, configure your Google Ads IDs first (Part 2 below) and then tap "Email Widget Code". The email will automatically include a note about your active tracking configuration.
Copy the code from the email
Open the email on your computer. You will find an HTML snippet that looks like this:
Select all of it and copy it to your clipboard.
Paste into your website, just before </body>
Open your website editor and paste the code at the very end of the HTML, just before the closing </body> tag. Save and publish your site.
- WordPress: Go to Appearance → Theme Editor → footer.php, paste before
</body>. Or use a plugin like "Insert Headers and Footers". - Wix: Site → Settings → Custom Code → Add Code at Bottom of Body.
- Squarespace: Settings → Advanced → Code Injection → Footer.
- Webflow: Project Settings → Custom Code → Footer Code.
Test it!
Visit your website and look for the floating "Book Appointment" button in the bottom-right corner of the page. Click it to verify the booking form opens correctly.
Customising the Widget
You can change these attributes directly in the code snippet without needing a new email:
| Attribute | What it does | Example |
|---|---|---|
data-button-text | The text label on the floating button | "Consult Now" |
data-button-color | The background color of the button (any CSS color) | "#16a34a" |
data-floating | Set to "false" to hide the floating button | "false" |
Triggering from your own buttons
If you set data-floating="false" and want your own existing buttons to open the widget, simply add the CSS class caseindex-trigger to those elements. Example: <a class="caseindex-trigger" href="#">Book Now</a>
Part 2: Google Ads Conversion Tracking
This section explains how to connect the widget to your Google Ads account so that every successful booking is reported as a conversion. This tells Google which ads, keywords, and audiences are generating real patients — not just clicks.
Before you begin
You need an active Google Ads account with at least one campaign running. If you don't have one yet, visit ads.google.com to create one.
Step A — Create a Conversion Action in Google Ads
A Conversion Action is Google's term for a specific event you want to track — in our case, "a patient made a booking". You need to create one so Google knows what to count.
Go to Google Ads → Goals → Conversions
In your Google Ads dashboard, click the Goals icon (the target/flag icon) in the left sidebar. Then click Conversions → Summary. You will see a table of your existing conversion actions (or an empty table if this is your first).
Click the blue "+ New conversion action" button
This opens a wizard to create a new type of conversion to track.
Select "Website" as the conversion source
Google will show you options: Website, App, Phone calls, Import. Choose Website because the booking happens on your website.
Enter your website domain and click "Scan"
Type your website's URL (e.g. www.drsharmahomoeopathy.com) and click Scan. Google will look for an existing Google tag on your site. Since we are installing a custom tag via the widget, just click "Add a conversion action manually" at the bottom of the page after scanning.
Configure the conversion action settings
You will see a form. Fill it in like this:
- Category: Choose "Submit lead form" (or "Book appointment" if shown — this varies by account). This tells Google what type of action this is.
- Conversion name: Enter a clear name like
Appointment Booked. This is just a label you'll see in your reports. - Value: Choose "Don't use a value" for simplicity, or enter an estimated value per booking (e.g. ₹500 if that's your typical consultation fee). Using a value helps Google optimise your bids for revenue.
- Count: Choose "One". This means each unique booking session counts as one conversion, avoiding duplicates.
- Click-through conversion window: Leave at default (30 days).
- View-through conversion window: Leave at default.
- Attribution model: "Data-driven" is recommended. If not available, choose "Last click".
Click "Done" to save these settings.
Click "Save and continue" → Choose "Install the tag yourself"
On the next screen Google asks how you want to set up the tag. Select "Install the tag yourself". Do not select Google Tag Manager — CaseIndex installs the tag directly.
Find and copy your two IDs from the code Google shows you
Google will show you a code snippet similar to this:
You need to copy two separate pieces from the send_to value:
- Google Ads ID: The part before the
/— starts withAW-
Example:AW-123456789 - Conversion Label: The part after the
/
Example:AbCdEfGhIjKlMnOp
What is the "Conversion Label"?
Google Ads uses the term Conversion Label — it's a unique code that identifies exactly this one booking conversion action. It's different from a "name". If you create multiple conversion actions in Google Ads (e.g. one for bookings, one for form fills), each gets its own Conversion Label. The label is how the widget knows which conversion to report when a booking is made.
Step B — Enter Your IDs in the CaseIndex App
Open the CaseIndex App → Settings → General
Scroll to "Website Widget & Tracking" and tap to expand
This section is collapsed by default. Tap the header to open it.
Enter your Google Ads ID
In the field labelled "Google Ads ID (e.g. AW-123456789)", paste the ID you copied from Google Ads. It must start with AW-.
AW-123456789
Enter your Conversion Label
In the field labelled "Google Ads Conversion Label", paste the label string after the / from the Google Ads code.
AbCdEfGhIjKlMnOp
(Optional) Enter GTM ID
If you use Google Tag Manager, you can also enter your GTM container ID (starts with GTM-). This allows GTM to fire alongside the direct Google Ads tag. Leave blank if you don't use GTM.
Tap "Save Configuration"
Scroll down and tap the blue Save Configuration button. Your tracking settings are now stored securely in CaseIndex.
Re-send your widget code email (if you already installed)
If you installed the widget on your site before setting up tracking, you don't need to reinstall anything. The widget automatically fetches the latest tracking config from CaseIndex every time it loads. Your Google Ads tracking will start working the next time someone loads your website.
How Conversions Are Tracked
Here is what happens behind the scenes when a patient books through your website widget:
Patient clicks "Book Appointment"
The widget fires a widget_opened event to Google Analytics (if you have it) and loads the booking form inside a secure overlay.
Patient completes the booking
After the patient fills in their details and submits, CaseIndex creates the booking and shows a confirmation.
Conversion is sent to Google Ads
The widget automatically fires gtag('event', 'conversion', { send_to: 'AW-xxx/Label' }). Google Ads records this as one conversion attributed to whichever keyword, ad, or campaign the patient clicked before visiting your site.
Verifying conversions in Google Ads
After a test booking, wait 24–48 hours and check Google Ads → Goals → Conversions → Summary. Your "Appointment Booked" action should show a count of 1. You can also use Google Tag Assistant in Chrome to verify the tag fires in real-time.
Frequently Asked Questions
Do I need any technical knowledge to install this?
No. If you can copy-paste text and know where to edit your website's footer, that's all you need. For platforms like WordPress, plugins like "Insert Headers and Footers" make it even easier.
What if I have multiple doctors on my booking page?
The widget shows all your doctors and clinics — patients can choose which doctor to book with. All bookings go to the correct calendar.
Will the tracking work if the patient books on a phone?
Yes. The gtag conversion event fires on all devices — mobile, tablet, and desktop.