Add “Book Now” & Gift-Voucher Buttons to Any Website
Integrating a “Book Now” or Gift Voucher call-to-action (CTA) from OctopusPro into any website, email or social profile turns casual visitors into confirmed bookings with just one click. Case studies show that a well-placed, on-brand booking button can lift conversions 5-10 % and gift-voucher modules can raise order values by 6 % or more.
Why Add Direct-Booking & Voucher CTAs?
| Benefit | Evidence | Typical Use Case |
|---|---|---|
| Higher Conversion Rate | Changing a “Book Now” button colour triggered a 10 % lift | Cleaning franchise embeds red CTA on every service page. |
| Bigger Basket Size | Orders paid with gift cards run 6 % higher on average | Spa upsells aromatherapy add-on at checkout. |
| Brand Trust & Consistency | White-label domains keep customers under your brand, boosting credibility | “booking.zenin.com.au” instead of booking.octopuspro.com. |
| Omnichannel Reach | Instagram’s native “Book” action funnels mobile users straight to checkout | Surf school links profile button to lesson scheduler. |
| Email & SMS Engagement | Well-placed links can double click-through rates in campaigns | Reminder email drives last-minute weekend bookings. |
Core Components & Terminology
| Term | Definition |
| Book Now Button | Customisable <button> that opens your portal’s service list or a single-service page. |
| Gift Voucher Button | CTA that jumps directly to the voucher-purchase screen for a chosen service. |
| Booking Link | Plain URL (no HTML) shareable in emails, social posts, SMS or QR codes. |
| Embed Code | Auto-generated HTML snippet pasted into any CMS, page builder or autoresponder. |
Step-by-Step Integration
1 Embed a Booking Button
- Admin Panel: Settings → Service Settings → Services.
- Click Embed beside a service or “All Services”.
- Copy HTML to clipboard.
- Paste into your site’s source (or use a code block in WordPress, Webflow, Squarespace, etc.).
- Publish & Test—button should open the exact service page in a new tab.
Tip: Embed one button per high-margin service to reduce clicks to checkout.
2 Embed a Gift-Voucher Button
Same path (Settings → Services), choose Embed, switch to Voucher tab, copy HTML, paste into the desired web area. Ideal for holiday landing pages or blog posts featuring gift ideas.
3 Share a Booking Link
Settings → Services → Embed and copy the Book Now URL. Paste it:
- Bio link on Instagram or TikTok.
- Campaign buttons in Mailchimp / HubSpot.
- SMS reminders for lapsed customers.
- QR code on invoices or flyers (use any QR generator).
Booking links require zero HTML knowledge and open in a fresh window—perfect for marketers updating content quickly.
4 Use Your Own Domain (White-Label)
- Purchase/allocate a sub-domain (e.g., book.yourbrand.com).
- Point CNAME to the value shown under Settings → Customer Portal → General Settings → Portal URL.
- Save and allow DNS propagation (up to 24 h). White-labelling keeps Google Analytics attribution intact and eliminates trust-breaking redirects.
To learn more, check out our guide on how to white-label your customer portal URL.
Customising Appearance
Navigate to Settings → Customer Portal → Branding & Style.
- Colours: High-contrast CTAs boost clicks; red or orange often wins in A/B tests.
- Border & Radius: Match your design system (e.g., 4 px radius for Material-style sites).
- Font & Size: Maintain 16–20 px for accessibility.
- Icons: Add calendar or gift icons to improve recognition.
Advanced Use-Case Playbook
| Scenario | Tactic | Outcome |
| Seasonal Push | Swap button text to “Book Your Winter Service” Nov–Mar. | HVAC firm filled off-season slots. |
| Influencer Collab | Give each influencer a UTM-tagged booking link. | Track ROI in GA4 & Ads. |
| Post-Purchase Upsell | Auto-email gift-voucher link after checkout (Rokt-style) | +8 % add-on revenue. |
| Social Stories | Create a story sticker with the booking link. | Beauty salon saw 18 % rise in mobile bookings. |
| Chatbot Prompt | Drop the link at the end of a Facebook Messenger sequence. | Accor Hotels chatbot boosted direct bookings 18 %. |
Frequently Asked Questions
Can I A/B-test button variants?
Yes—paste Variant A on one landing page, Variant B on another; compare in GA4 or your CRO tool. Booking widgets are lightweight and cache-friendly.
Does OctopusPro support multiple gift-voucher denominations?
Each service can have its own voucher values; embed separate buttons if you want tiered options.
Can I style buttons via external CSS only?
Absolutely—add a class in the embed code (class=”cta-book”) and override in your site’s stylesheet.
Quick Launch Checklist
With these tactics in place, your site transforms into a high-converting, fully branded booking engine—and every visitor becomes a potential sale.
To stay updated, please subscribe to our Youtube Channel.