Velorisce Widget Integration

Web Widget

The Velorisce web widget lets you embed your booking, business hours, and services directly onto your website. Visitors can book appointments without ever leaving your site.

---

Getting Your Widget

1. Go to dashboard.velorisce.com and open your business.

2. Navigate to Web Widget in the sidebar.

3. Customize the widget to match your brand (colors, size, and style).

4. Copy the widget snippet.

5. Paste it into your website wherever you want it to appear.

That's it — the widget will go live immediately on your page.

---

Customization

Before copying your snippet, you can personalize the widget's appearance from the Web Widget page:

• Primary color — matches your brand color

• Accent color — used for highlights and buttons

• Background color — the widget's background

• Corner radius — controls how rounded the edges are

• Height and width — sets the size of the widget on the page

Changes preview in real time so you can see exactly how it'll look before adding it to your site.

---

Where to Paste It

Once you've copied your snippet, paste it into your website at the spot where you want the widget to show up. Here's how to do that on the most common platforms:

Platform	How to add it
WordPress	Add a Custom HTML block where you want the widget
Squarespace	Insert a Code Block at the desired location
Wix	Use an HTML Embed element
Webflow	Drop in an Embed element
Plain HTML	Paste directly into the page body

---

What the Snippets Look Like

There are three widgets available, each with its own snippet. You can use one, two, or all three on your website.

You don't need to edit any of these — just copy and paste them as-is. Your Business ID and any customizations you set in the dashboard are already included automatically.

Booking Widget

Lets visitors book appointments directly on your site.

<div id="velorisce-booking"></div>
<script
  src="https://dashboard.velorisce.com/booking-widget.js"
  data-velorisce-booking
  data-business-id="your-business-id"
  data-target="velorisce-booking"
  data-primary-color="#9a3412"
  data-accent-color="#f6d8c8"
  data-background-color="#fffaf7"
  data-radius="24"
  data-height="900px"
></script>

Business Hours Widget

Displays your up-to-date business hours.

<div id="velorisce-hours"></div>
<script
  src="https://dashboard.velorisce.com/business-hours-widget.js"
  data-velorisce-hours
  data-business-id="your-business-id"
  data-target="velorisce-hours"
  data-title="Our Hours"
></script>

Services Widget

Shows the services your business offers.

<div id="velorisce-services"></div>
<script
  src="https://dashboard.velorisce.com/services-widget.js"
  data-velorisce-services
  data-business-id="your-business-id"
  data-target="velorisce-services"
  data-title="What We Offer"
></script>

---

Need help? Reach out to Velorisce support from your dashboard and we'll get it sorted.