01
What you get
Every shop on Carvikon has a booking page the moment its account exists. It lives at booking.carvikon.com/your-shop-name, shows only the days you are open and the times still free, and puts each booking straight onto your Scheduling calendar, into the CRM and — if connected — onto your Google Calendar. Nothing to switch on.
Everything about it is managed from one place: Settings → Booking page. That tab gives you the link and a printable QR code, lets you change the web address, choose colours with a live preview, copy the code that puts the form on your own website, and set the booking rules.
- The hosted page — your logo, address, phone and opening hours beside the form. Share this one.
- The embedded form — the same form, without the surrounding page, styled to sit inside your own site.
- The QR code — for the counter, the waiting room, the invoice, the truck.
03
Add it to your website
Three ways, from simplest to most flexible. All three are copied ready-made — with your own shop name filled in — from Settings → Booking page → Add to your website. Pick the one your site builder allows.
1. On a page (recommended). Paste this where the form should appear. The form grows to fit its content, so there is never a scrollbar inside your page, and it picks up every change you save in Settings without touching the code again.
<div data-carvikon-booking="your-shop"></div>
<script src="https://booking.carvikon.com/embed.js" async></script>2. A pop-up button. Nothing changes on your page except a floating “Book now” button in the corner. Clicking it opens the form over the page; Escape or the backdrop closes it.
<script src="https://booking.carvikon.com/embed.js" data-shop="your-shop" data-mode="popup" data-label="Book now" async></script>3. A plain iframe. For builders that strip scripts (GoDaddy, Google Sites, some Wix plans). It works everywhere, but the height is fixed, so the form scrolls inside the box if it runs longer than the number you give it.
<iframe src="https://booking.carvikon.com/embed/your-shop" title="Book an appointment" style="width:100%;height:960px;border:0" loading="lazy" allow="camera"></iframe>04
Platform guides
Where the paste goes, builder by builder. Use the “On a page” code unless the builder is listed as script-free.
- WordPress — edit the page, add a Custom HTML block, paste. In Elementor use the HTML widget; in Divi the Code module.
- Squarespace — add a Code block (Business plan or higher runs scripts; on Personal, use the plain iframe in an Embed block).
- Wix — Add → Embed code → Embed HTML, paste into the box, then stretch it to full width. If the box stays blank, Wix is blocking scripts on your plan: use the plain iframe.
- GoDaddy Website Builder — script-free. Add an HTML section and paste the plain iframe.
- Google Sites — script-free. Insert → Embed → By URL, and paste just the iframe address (booking.carvikon.com/embed/your-shop).
- Shopify — on a page, switch the editor to Show HTML and paste; in the theme editor add a Custom Liquid section.
- Webflow — drop in an Embed element and paste.
- Framer — add an Embed component, choose HTML, paste.
- Carrd, Weebly, Strikingly, anything else — look for “embed”, “HTML” or “custom code”. If it accepts a script, use “On a page”; if not, the iframe.
Do not have a website? The hosted page is your booking site. Put the link in your Google Business Profile and on your social profiles and you are done.
05
Make it match your brand
Settings → Booking page → Look & feel. The preview beside the controls is the real form, so what you see is exactly what a customer sees. Save once and every copy of the form — the hosted page, every embed on every site — changes together.
- Logo. Upload it under Shops (or from the prompt on this tab). It appears on the hosted page in place of Carvikon’s mark and, if you leave the header on, above the embedded form.
- Appearance. Auto follows each visitor’s device. If your site is always dark or always light, choose that instead so the form never fights the page around it.
- Accent. One colour for the buttons and the selected day and time. The hover shade and the tint behind selections are worked out from it.
- Background and text. Leave them alone for Carvikon’s surface, choose Transparent so the embed sits directly on your page, or pick your own. Text colour is chosen for readability unless you set it.
- Corners and font. Sharp, soft or round; Carvikon’s typeface or the visitor’s own system font (closest to “whatever my site uses”).
- Header and welcome line. Hide your name and logo when the form already sits under a heading on your site; add one line of your own under the title.
Overriding per page. A developer can override any of these on one embed with data- attributes on the container, or with the same names as URL parameters on the iframe address. Anything not overridden falls back to what is saved in Settings.
<div data-carvikon-booking="your-shop" data-theme="dark" data-accent="#1d4ed8" data-background="transparent" data-header="0"></div>
<script src="https://booking.carvikon.com/embed.js" async></script>| Attribute / parameter | Values | What it does |
|---|---|---|
| theme | auto · light · dark | Light or dark form. Auto follows the visitor's device. |
| accent | #rrggbb | Buttons and selections. Hover and tint are derived. |
| background | #rrggbb · transparent · default | The card behind the form. Transparent blends into your page. |
| text | #rrggbb · default | Body text. Left unset, it is picked to read on the background. |
| radius | sharp · soft · round | Corner style of every field, chip and button. |
| font | geist · system | Carvikon's typeface or the visitor's system font. |
| header | 1 · 0 | Show or hide the shop name and logo above the form. |
| lang | en · es · fr · pl · sk | Force the form's language instead of the visitor's choice. |
06
Availability and booking rules
The page only ever offers times you can take. Days you are closed are greyed out, days with nothing left say “Full”, and a time disappears the moment somebody else takes it or it slips inside your notice period. Every time is shown in your timezone, and the page says so when the visitor’s clock is different.
- Opening hours come from Settings → Shops. Set them once; the booking page, the AI Front Desk and after-hours texting all read the same week.
- Time slots — every 15, 30 or 60 minutes. Thirty is the default.
- Minimum notice — how close to now a customer may book. Two hours is the default; set a day if you need to see tomorrow coming.
- How far ahead — two weeks to three months of dates on the page.
What happens when someone books. The appointment lands in your Scheduled column with the customer, vehicle and their note attached; the customer is added to (or matched in) the CRM; the appointment syncs to Google Calendar if you have connected it; and the customer gets an on-screen confirmation with an add-to-calendar button. One appointment per time slot — two people can never book the same minute.
Texting consent is asked for on the form, optional, and recorded with the wording the customer agreed to, so follow-up messages from Carvikon stay compliant.
07
For developers
The loader at https://booking.carvikon.com/embed.js is a few kilobytes of dependency-free ES5. It mounts an iframe for every [data-carvikon-booking] element (or the script tag’s own data-shop), resizes it from postMessage events, and exposes a small API.
| Attribute | On | What it does |
|---|---|---|
| data-carvikon-booking | container | The shop's address slug. Marks the element to mount into. |
| data-shop | script | Same thing, on the script tag: mounts right after the tag. |
| data-mode | either | popup renders a floating button and an overlay instead of an inline form. |
| data-label | either | The floating button's text. Default “Book now”. |
| data-position | either | right (default) or left for the floating button. |
| data-button | either | false hides the floating button (pair with data-trigger). |
| data-trigger | either | A CSS selector; clicks on matching elements open the pop-up. |
| data-min-height | either | Iframe height in pixels before the first resize message. Default 640. |
| data-width | either | Pop-up panel width in pixels. Default 480. |
| data-title | either | The iframe's accessible title. |
| data-theme … data-lang | either | Any styling override from the table above. |
Open the pop-up from your own button.
<a href="#book" id="book-now">Book an appointment</a>
<script src="https://booking.carvikon.com/embed.js" data-shop="your-shop" data-mode="popup" data-trigger="#book-now" data-button="false" async></script>Events. The container (and window) receives carvikon:ready when the form has loaded and carvikon:booked when an appointment is made — the place to fire a conversion.
document.addEventListener("carvikon:booked", function (event) {
// event.detail = { slug: "your-shop", when: "2026-10-02T13:00:00.000Z" }
gtag("event", "conversion", { send_to: "AW-XXXX/booking" });
});JavaScript API. window.CarvikonBooking exposes mount(element, options) for single-page apps that render the container after load, open(slug, options) and close() for the pop-up, and init() to re-scan the page. options takes the attribute names without the data- prefix.
Framing. Only the embed route (/embed/…, also served as booking.carvikon.com/your-shop/embed) allows itself to be framed; every other Carvikon page sends frame-ancestors 'none'. The embed sets noindex. The form asks for camera permission only for the VIN scanner, which is why the snippets carry allow="camera"; drop it if you would rather not.
Messages. The frame posts { source: "carvikon-booking", type, … } to its parent: ready, resize (height in CSS pixels) and booked (when as an ISO instant). Nothing personal ever crosses that boundary.
08
Troubleshooting
- The form does not appear at all. Your builder is stripping the script. Use the plain iframe, or check the browser console for a blocked request to
embed.js. - It appears, but in the wrong colours. Appearance is on Auto and the visitor’s device disagrees with your site. Set Light or Dark explicitly, or pick a background colour.
- A white box around a transparent form. Some builders wrap embeds in their own panel. Set the panel’s background to transparent in the builder, or give the form a background colour instead.
- Times look wrong. The page shows your shop’s timezone (Settings → Shops). A customer in another zone sees a note saying so.
- “No openings in the next few weeks.” Every day is closed in Settings → Shops, or the notice period is longer than the horizon. Fix the hours first.
- “Another shop already uses that address.” Addresses are unique across Carvikon. Add your town or your street.
- The pop-up button hides something on my page. Use
data-position="left", or hide the button withdata-button="false"and open it from your own link withdata-trigger.
09
Questions
Does it cost extra? No. The booking page, the QR code and the website embed are part of every plan.
Can I turn it off? Bookings are auto-confirmed; there is no approval queue. If you need to stop taking online bookings for a while, close every day in Settings → Shops and the page says so.
Can each of my locations have its own? Yes — each shop has its own address, its own colours and its own rules, all on the same tab when you switch shops.
Can I remove “Powered by Carvikon”? Not at the moment. It is small, it sits under the form, and it is how the next shop finds us.
Will you set it up for me? Yes — see below, or get in touch.