Skip to main content

Styling

Find the class name of the element you'd like to edit that starts with 'setster-' class name. Then add your modifications within a <style> tag in the <head> of the html on your embed page.

Embed Sizing​

Embed Height​

Use the embed_height property within your settings.json file to control the height of your embed.

{
  "embed_height": {
    "desktop": "550px",
    "tablet": "520px",
    "mobile": "520px"
  }
}
desktop
required
string

Embed height on desktop

mobile
required
string

Embed height on mobile

tablet
required
string

Embed height on tablet

{
  • "mobile": "480px",
  • "tablet": "680px",
  • "desktop": "800px"
}

Responsiveness​

Use the breakpoints property within your settings.json file to control the widths of mobile and responsive views.

{
  "breakpoints": {
    "mobile": 600,
    "tablet": 960,
    "desktop": 1280
  }
}
desktop
required
integer

Embed width on desktop

mobile
required
integer

Embed width on mobile

tablet
required
integer

Embed width on tablet

{
  • "mobile": 480,
  • "tablet": 680,
  • "desktop": 800
}

Using Classes​

All core elements in the Studio embed will include a class name that begins with setster-. These classes allow you to easily target and style each element. By default these classes' styles take priority and won't have any styles applied to them that you'll have to worry about overriding. This makes completely customizing the look and feel of your embed easier than ever.

For Example, To change the step's navigation button color, inspect the element to find the class name beginning with setster-. Then, add the CSS modifications to a style tag on the embed page.

<head>
  <style>
    .setster-step-navigation-button {
      background: #8585d0;
    }
  </style>
</head>

Branding Your Embed​

Building branded booking experiences is as easy as editing a few lines of CSS. See how it's done in the <style> tags in the sandbox below.

Embed Id Class Names​

Some classes change depending on the embed_id you set in SetsterStudio.init(). The embed_id should have been the first argument provided to the initialization script.

Example

If you set your embed id to "my-embed-id" and pass it to the initialization script SetsterStudio.init("my-embed-id", settingFile) it would result in a handful of classes being generated using this id like setster-my-embed-id-select-cards-module

Main container id classes​

This applies to the primary navigation container with the following classes:

  • setster-[[YOUR-EMBED-ID]]-header
  • setster-[[YOUR-EMBED-ID]]-body
  • setster-[[YOUR-EMBED-ID]]-footer

Step module id classes​

Applies to the following steps and components:

  • setster-[[YOUR-EMBED-ID]]-cancel-module
  • setster-[[YOUR-EMBED-ID]]-image-map-module
  • setster-[[YOUR-EMBED-ID]]-info-module
  • setster-[[YOUR-EMBED-ID]]-questions-module
  • setster-[[YOUR-EMBED-ID]]-locations-map-module
  • setster-[[YOUR-EMBED-ID]]-submit-module
  • setster-[[YOUR-EMBED-ID]]-thank-you-module
  • setster-[[YOUR-EMBED-ID]]-calendar-module
  • setster-[[YOUR-EMBED-ID]]-dialogue
  • setster-[[YOUR-EMBED-ID]]-select-cards-module
  • setster-[[YOUR-EMBED-ID]]-api-select-list-module

Style selections​

New classes are appended to selected items to allow separate styling of selected items

See the following selectable classes:

  • setster-select-item-selected: List items selected, including locations, services, and staff
  • setster-select-item-selected: Card items selected
  • setster-available-times-item-selected: Time slot selected
  • setster-calendar-current-day: Date selected
  • setster-questions-response-button-selected: Questions button selected
  • input-focused: Appointment booking form fields
info

The selected image map is modified by setting the fillColor property within the image-map step in the settings file instead of using an active class.