Skip to main content
Skip table of contents

Widget Library

The Widget Library contains all our widgets and information about each of them. This includes key information about how the widget works, how it looks like, different parameters that can be used for customization and examples.

Currently, widgets are supported in the following languages:

  • English (default)

  • Norwegian

  • German

  • Spanish

  • French

  • Italian

  • Dutch

By default, the widgets will infer the language from the user’s browser settings. If the user has an unsupported language selected for the browser, the widgets will default to English.

After the configuration is set up, these are the steps to implement widgets to your website (CMS):

  1. Select the appropriate widget you’d like to use.

  2. Copy & paste the widget code into your CMS by the method your CMS requires.

  3. Edit the product code to match the bookable product in Bilberry.

  4. Save & place the widget where desired

Book Now Button

Code

CODE 
<bilberry-booking-button></bilberry-booking-button>

Parameters and examples

size

optional

“s”, “m”, “l”
default: “s”

controls size on medium to large screens

CODE 
<bilberry-booking-button size="m"></bilberry-booking-button>

xs-size

optional

“s”, “m”, “l”
default: “s”

controls size on small screens (mobile)

CODE 
<bilberry-booking-button xs-size="s"></bilberry-booking-button>

Text Customization

If you’d like to change the text from “book now” to something else, use this customization key as done in the example below. This customization key must be set in the configuration code. Read more about text customization here.

button-text-customization-key

Text of the button

CODE 
<bilberry-booking-button button-text-customization-key="booking-button"></bilberry-booking-button>

Product List

Code

CODE 
<bilberry-product-list product-catalog-ids="1,2,3"></bilberry-product-list>

Replace “1”, “2” and “3” in the code provided, with your Bilberry product IDs (Found to the left of the product name in your product overview in Bilberry)

Parameters and examples

Examples

product-catalog-ids

required*

csv list of numbers

comma-separated list of product catalog ids found in Bilberry. [*] You must either specify this or (product-collection-id)

CODE 
<bilberry-product-list product-catalog-ids="1,2,3"></bilberry-product-list>

product-collection-id

required*

number

The id of a product collection defined in Bilberry. [*] You must either specify this or (product-catalog-ids)

CODE 
<bilberry-product-list product-collection-id="3" ></bilberry-product-list>

product-catalog-urls

optional

csv list of urls

If you need to overwrite the url to the “Read more and book”-buttons you can use a comma-separated list of urls to a product page for each product. The order of urls here must match the order in the product-catalog-ids parameter

CODE 
<bilberry-product-list product-catalog-ids="1,2,3" product-catalog-urls="/page-1,/page-2,/page-3"></bilberry-product-list>

scroll

optional

“yes” | “no
default: “yes”

Scroll if “yes”, wrap if “no”

CODE 
<bilberry-product-list product-catalog-ids="1,2,3" scroll="no"></bilberry-product-list>

num-xs

optional

number
default: 1

Cards visible per row on extra small screens (mobile).

CODE 
<bilberry-product-list 
  product-catalog-ids="1,2,3"
  num-xs="1"
  num-sm="2"
  num-md="3"
  num-lg="4"
></bilberry-product-list>

num-sm

optional

number
default: 2

Cards visible per row on small screens (tablets).

CODE 
<bilberry-product-list 
  product-catalog-ids="1,2,3"
  num-xs="1"
  num-sm="2"
  num-md="3"
  num-lg="4"
></bilberry-product-list>

num-md

optional

number
default: 2

Cards visible per row on medium screens (small desktop screens).

CODE 
<bilberry-product-list 
  product-catalog-ids="1,2,3"
  num-xs="1"
  num-sm="2"
  num-md="3"
  num-lg="4"
></bilberry-product-list>

num-lg

optional

number
default: 3

Cards visible per row on large screens (large desktop screens).

CODE 
<bilberry-product-list 
  product-catalog-ids="1,2,3"
  num-xs="1"
  num-sm="2"
  num-md="3"
  num-lg="4"
></bilberry-product-list>

background-colors

optional

csv list of colors

comma-separated list of html color codes to overwrite the colors of the product cards in the list

CODE 
<bilberry-product-list product-catalog-ids="1,2,3" ></bilberry-product-list>

text-colors

optional

csv list of colors

comma-separated list of html color codes to overwrite the colors of the product cards in the list

CODE 
<bilberry-product-list product-catalog-ids="1,2,3" ></bilberry-product-list>

primary-colors

optional

csv list of colors

comma-separated list of html color codes to overwrite the colors of the product cards in the list

CODE 
<bilberry-product-list
    product-catalog-ids="1,2,3"
    background-colors="#395542,#1D252D,#333F48"
    text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    primary-colors="#183028,#333F48,#1D252D"
    primary-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    accent-colors="#183028,#333F48,#1D252D"
    accent-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
></bilberry-product-list>

primary-text-colors

optional

csv list of colors

comma-separated list of html color codes to overwrite the colors of the product cards in the list

CODE 
<bilberry-product-list
    product-catalog-ids="1,2,3"
    background-colors="#395542,#1D252D,#333F48"
    text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    primary-colors="#183028,#333F48,#1D252D"
    primary-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    accent-colors="#183028,#333F48,#1D252D"
    accent-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
></bilberry-product-list>

accent-colors

optional

csv list of colors

comma-separated list of html color codes to overwrite the colors of the product cards in the list

CODE 
<bilberry-product-list
    product-catalog-ids="1,2,3"
    background-colors="#395542,#1D252D,#333F48"
    text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    primary-colors="#183028,#333F48,#1D252D"
    primary-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    accent-colors="#183028,#333F48,#1D252D"
    accent-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
></bilberry-product-list>

accent-text-colors

optional

csv list of colors

comma-separated list of html color codes to overwrite the colors of the product cards in the list

CODE 
<bilberry-product-list
    product-catalog-ids="1,2,3"
    background-colors="#395542,#1D252D,#333F48"
    text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    primary-colors="#183028,#333F48,#1D252D"
    primary-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    accent-colors="#183028,#333F48,#1D252D"
    accent-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
></bilberry-product-list>

Product List Bookable

Code

CODE 
<bilberry-product-list-bookable product-collection-id="3" scroll="no"></bilberry-product-list-bookable>

Replace “3” in the code provided, with your Bilberry product ID (Found to the left of the product name in your product overview in Bilberry)

Parameters and examples

product-collection-id

required

number

The id of a product collection defined in Bilberry backoffice.

CODE 
<bilberry-product-list-bookable product-collection-id="3"></bilberry-product-list-bookable>

scroll

optional

“yes” | “no
default: “yes”

Scroll if “yes”, wrap if “no”

CODE 
<bilberry-product-list-bookable product-collection-id="3" scroll="no"></bilberry-product-list-bookable>

num-xs

optional

number
default: 1

Cards visible per row on extra small screens (mobile).

CODE 
<bilberry-product-list 
  product-catalog-ids="1,2,3"
  num-xs="1"
  num-sm="2"
  num-md="3"
  num-lg="4"
></bilberry-product-list>

num-sm

optional

number
default: 2

Cards visible per row on small screens (tablets).

CODE 
<bilberry-product-list 
  product-catalog-ids="1,2,3"
  num-xs="1"
  num-sm="2"
  num-md="3"
  num-lg="4"
></bilberry-product-list>

num-md

optional

number
default: 2

Cards visible per row on medium screens (small desktop screens).

CODE 
<bilberry-product-list 
  product-catalog-ids="1,2,3"
  num-xs="1"
  num-sm="2"
  num-md="3"
  num-lg="4"
></bilberry-product-list>

num-lg

optional

number
default: 3

Cards visible per row on large screens (large desktop screens).

CODE 
<bilberry-product-list 
  product-catalog-ids="1,2,3"
  num-xs="1"
  num-sm="2"
  num-md="3"
  num-lg="4"
></bilberry-product-list>

background-colors

optional

csv list of colors

comma-separated list of html color codes

CODE 
<bilberry-product-list
    product-catalog-ids="1,2,3"
    background-colors="#395542,#1D252D,#333F48"
    text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    primary-colors="#183028,#333F48,#1D252D"
    primary-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    accent-colors="#183028,#333F48,#1D252D"
    accent-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
></bilberry-product-list>

text-colors

optional

csv list of colors

comma-separated list of html color codes

CODE 
<bilberry-product-list
    product-catalog-ids="1,2,3"
    background-colors="#395542,#1D252D,#333F48"
    text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    primary-colors="#183028,#333F48,#1D252D"
    primary-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    accent-colors="#183028,#333F48,#1D252D"
    accent-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
></bilberry-product-list>

primary-colors

optional

csv list of colors

comma-separated list of html color codes

CODE 
<bilberry-product-list
    product-catalog-ids="1,2,3"
    background-colors="#395542,#1D252D,#333F48"
    text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    primary-colors="#183028,#333F48,#1D252D"
    primary-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    accent-colors="#183028,#333F48,#1D252D"
    accent-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
></bilberry-product-list>

primary-text-colors

optional

csv list of colors

comma-separated list of html color codes

CODE 
<bilberry-product-list
    product-catalog-ids="1,2,3"
    background-colors="#395542,#1D252D,#333F48"
    text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    primary-colors="#183028,#333F48,#1D252D"
    primary-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    accent-colors="#183028,#333F48,#1D252D"
    accent-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
></bilberry-product-list>

accent-colors

optional

csv list of colors

comma-separated list of html color codes

CODE 
<bilberry-product-list
    product-catalog-ids="1,2,3"
    background-colors="#395542,#1D252D,#333F48"
    text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    primary-colors="#183028,#333F48,#1D252D"
    primary-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    accent-colors="#183028,#333F48,#1D252D"
    accent-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
></bilberry-product-list>

accent-text-colors

optional

csv list of colors

comma-separated list of html color codes

CODE 
<bilberry-product-list
    product-catalog-ids="1,2,3"
    background-colors="#395542,#1D252D,#333F48"
    text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    primary-colors="#183028,#333F48,#1D252D"
    primary-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    accent-colors="#183028,#333F48,#1D252D"
    accent-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
></bilberry-product-list>

hide-read-more

optional

“yes” | “no”
default: “no”

Set to “yes” in order to hide the “Les mer” link.

CODE 
<bilberry-product-list-bookable product-collection-id="3" hide-read-more="yes"></bilberry-product-list-bookable>

Tour List Bookable

Code

CODE 
<bilberry-tour-list-bookable tour-ids="101123,101134"></bilberry-tour-list-bookable>

Replace “101123,101134” in the code provided, with the Project number (Found in the top left within the specific joined trip overview in Bilberry):

Parameters and examples

tour-ids

required*

number

The id of a tour defined in Bilberry backoffice. [*]

CODE 
<bilberry-tour-list-bookable tour-ids="101123,101134"></bilberry-tour-list-bookable>

scroll

optional

“yes” | “no
default: “yes”

Scroll if “yes”, wrap if “no”

CODE 
<bilberry-tour-list-bookable
    tour-ids="101123,101134"
    scroll="no"
></bilberry-tour-list-bookable>

num-xs

optional

number
default: 1

Cards visible per row on extra small screens (mobile).

CODE 
<bilberry-tour-list-bookable
    tour-ids="101123,101134"
    num-xs="1"
    num-sm="2"
    num-md="3"
    num-lg="4"
></bilberry-tour-list-bookable>

num-sm

optional

number
default: 2

Cards visible per row on small screens (tablets).

CODE 
<bilberry-tour-list-bookable
    tour-ids="101123,101134"
    num-xs="1"
    num-sm="2"
    num-md="3"
    num-lg="4"
></bilberry-tour-list-bookable>

num-md

optional

number
default: 2

Cards visible per row on medium screens (small desktop screens).

CODE 
<bilberry-tour-list-bookable
    tour-ids="101123,101134"
    num-xs="1"
    num-sm="2"
    num-md="3"
    num-lg="4"
></bilberry-tour-list-bookable>

num-lg

optional

number
default: 3

Cards visible per row on large screens (large desktop screens).

CODE 
<bilberry-tour-list-bookable
    tour-ids="101123,101134"
    num-xs="1"
    num-sm="2"
    num-md="3"
    num-lg="4"
></bilberry-tour-list-bookable>

background-colors

optional

csv list of colors

comma-separated list of html color codes

CODE 
<bilberry-tour-list-bookable
    tour-ids="101123,101134"
    background-colors="#395542,#1D252D,#333F48"
    text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    primary-colors="#183028,#333F48,#1D252D"
    primary-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    accent-colors="#183028,#333F48,#1D252D"
    accent-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
></bilberry-tour-list-bookable>

text-colors

optional

csv list of colors

comma-separated list of html color codes

CODE 
<bilberry-tour-list-bookable
    tour-ids="101123,101134"
    background-colors="#395542,#1D252D,#333F48"
    text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    primary-colors="#183028,#333F48,#1D252D"
    primary-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    accent-colors="#183028,#333F48,#1D252D"
    accent-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
></bilberry-tour-list-bookable>

primary-colors

optional

csv list of colors

comma-separated list of html color codes

CODE 
<bilberry-tour-list-bookable
    tour-ids="101123,101134"
    background-colors="#395542,#1D252D,#333F48"
    text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    primary-colors="#183028,#333F48,#1D252D"
    primary-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    accent-colors="#183028,#333F48,#1D252D"
    accent-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
></bilberry-tour-list-bookable>

primary-text-colors

optional

csv list of colors

comma-separated list of html color codes

CODE 
<bilberry-tour-list-bookable
    tour-ids="101123,101134"
    background-colors="#395542,#1D252D,#333F48"
    text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    primary-colors="#183028,#333F48,#1D252D"
    primary-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    accent-colors="#183028,#333F48,#1D252D"
    accent-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
></bilberry-tour-list-bookable>

accent-colors

optional

csv list of colors

comma-separated list of html color codes

CODE 
<bilberry-tour-list-bookable
    tour-ids="101123,101134"
    background-colors="#395542,#1D252D,#333F48"
    text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    primary-colors="#183028,#333F48,#1D252D"
    primary-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    accent-colors="#183028,#333F48,#1D252D"
    accent-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
></bilberry-tour-list-bookable>

accent-text-colors

optional

csv list of colors

comma-separated list of html color codes

CODE 
<bilberry-tour-list-bookable
    tour-ids="101123,101134"
    background-colors="#395542,#1D252D,#333F48"
    text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    primary-colors="#183028,#333F48,#1D252D"
    primary-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    accent-colors="#183028,#333F48,#1D252D"
    accent-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
></bilberry-tour-list-bookable>

hide-read-more

optional

“yes” | “no”
default: “no”

Set to “yes” in order to hide the “Read more” link.

CODE 
<bilberry-tour-list-bookable
    tour-ids="101123,101134"
    hide-read-more="yes"
></bilberry-tour-list-bookable>

Featured Product

Code

CODE 
<bilberry-product-featured product-catalog-id="123"></bilberry-product-featured>

Replace “3” in the code provided, with your Bilberry product ID (Found to the left of the product name in your product overview in Bilberry)

Parameters and examples

product-catalog-id

required

number

Id of the product catalog found in Bilberry

CODE 
<bilberry-product-featured product-catalog-id="123"></bilberry-product-featured>

background-color

optional

color

Allow overriding default colors from theme

CODE 
<bilberry-product-featured product-catalog-id="123"
  background-color="#395542"
  text-color="#FFFFFF"
  primary-color="#183028"
  primary-text-colors="#FFFFFF"
  accent-color="#183028"
  accent-text-color="#FFFFFF"
></bilberry-product-featured>

text-color

optional

color

Allow overriding default colors from theme

CODE 
<bilberry-product-featured product-catalog-id="123"
  background-color="#395542"
  text-color="#FFFFFF"
  primary-color="#183028"
  primary-text-colors="#FFFFFF"
  accent-color="#183028"
  accent-text-color="#FFFFFF"
></bilberry-product-featured>

primary-color

optional

color

Allow overriding default colors from theme

CODE 
<bilberry-product-featured product-catalog-id="123"
  background-color="#395542"
  text-color="#FFFFFF"
  primary-color="#183028"
  primary-text-colors="#FFFFFF"
  accent-color="#183028"
  accent-text-color="#FFFFFF"
></bilberry-product-featured>

primary-text-color

optional

color

Allow overriding default colors from theme

CODE 
<bilberry-product-featured product-catalog-id="123"
  background-color="#395542"
  text-color="#FFFFFF"
  primary-color="#183028"
  primary-text-colors="#FFFFFF"
  accent-color="#183028"
  accent-text-color="#FFFFFF"
></bilberry-product-featured>

accent-color

optional

color

Allow overriding default colors from theme

CODE 
<bilberry-product-featured product-catalog-id="123"
  background-color="#395542"
  text-color="#FFFFFF"
  primary-color="#183028"
  primary-text-colors="#FFFFFF"
  accent-color="#183028"
  accent-text-color="#FFFFFF"
></bilberry-product-featured>

accent-text-color

optional

color

Allow overriding default colors from theme

CODE 
<bilberry-product-featured product-catalog-id="123"
  background-color="#395542"
  text-color="#FFFFFF"
  primary-color="#183028"
  primary-text-colors="#FFFFFF"
  accent-color="#183028"
  accent-text-color="#FFFFFF"
></bilberry-product-featured>

product-catalog-url

optional

url

Link url for “read more” button and image.

CODE 
<bilberry-product-featured product-catalog-id="123"
  product-catalog-url="/page-1"
></bilberry-product-featured>

Leads Form

Code

CODE 
<bilberry-leads-form></bilberry-leads-form>

Parameters and examples

hide-request-date

optional

“yes”, “no”

default: “no”

Hides the date input field.

CODE 
<bilberry-leads-form
  hide-request-date="yes"
></bilberry-leads-form>
Text Customizations Possible

If you’d like to change the text from “Any special requests, food allergies..?” to something else, use any customization key as done in the example below. This customization key must be set in the configuration code. Read more on: link to text customization page?

comment-placeholder-text-customization-key

CODE 
<bilberry-leads-form
  comment-placeholder-text-customization-key="example_key_placeholder" 
></bilberry-leads-form>

Request Tour

Code

CODE 
<bilberry-request-tour></bilberry-request-tour>

Parameters and examples

hide-request-date

optional

“yes”, “no”

default: “no”

Hides the date input field.

CODE 
<bilberry-request-tour hide-request-date="yes"></bilberry-request-tour>

expand-arrow-inside

Optional

“yes”, “no”

default: “no”

Specify whether the arrow at the top of the widget, should be on the outside, or inside.

CODE 
<bilberry-request-tour expand-arrow-inside=yes"></bilberry-request-tour>

position-offscreen

optional

“yes”, “no”

default: “no”

Place the closed position below the bottom of the screen so nothing is showing until the popup is opened by the external button widget

CODE 
<bilberry-request-tour position-offscreen="yes"></bilberry-request-tour>

Booking Search Form

Code

CODE 
<bilberry-booking-search-form url="/activities"></bilberry-booking-search-form>

Replace “/activities” in the code provided, with url to the page you would like the user to land on when clicking “Find activities”

Parameters and examples

url

required

url

User is navigated to this url when “Find activities” button is clicked.

CODE 
<bilberry-booking-search-form url="/activities"></bilberry-booking-search-form>

Booking Search

Code

CODE 
<bilberry-booking-search></bilberry-booking-search>

By default (no search criterias specified) all products with at least one available time slot will be listed.

Parameters and examples

num-xs

optional

number
default: 1

Cards visible per row on extra small screens (mobile).

CODE 
<bilberry-booking-search 
  num-xs="1"
  num-sm="2"
  num-md="3"
  num-lg="3"
></bilberry-booking-search>

num-sm

optional

number
default: 2

Cards visible per row on small screens (tablets).

CODE 
<bilberry-booking-search 
  num-xs="1"
  num-sm="2"
  num-md="3"
  num-lg="3"
></bilberry-booking-search>

num-md

optional

number
default: 2

Cards visible per row on medium screens (small desktop screens).

CODE 
<bilberry-booking-search 
  num-xs="1"
  num-sm="2"
  num-md="3"
  num-lg="3"
></bilberry-booking-search>

num-lg

optional

number
default: 3

Cards visible per row on large screens (large desktop screens).

CODE 
<bilberry-booking-search 
  num-xs="1"
  num-sm="2"
  num-md="3"
  num-lg="3"
></bilberry-booking-search>

primary-text-colors

optional

csv list of colors

comma-separated list of html color codes

CODE 
<bilberry-booking-search
    background-colors="#395542,#1D252D,#333F48"
    text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    primary-colors="#183028,#333F48,#1D252D"
    primary-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    accent-colors="#183028,#333F48,#1D252D"
    accent-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
></bilberry-booking-search>

accent-colors

optional

csv list of colors

comma-separated list of html color codes

CODE 
<bilberry-booking-search
    background-colors="#395542,#1D252D,#333F48"
    text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    primary-colors="#183028,#333F48,#1D252D"
    primary-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    accent-colors="#183028,#333F48,#1D252D"
    accent-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
></bilberry-booking-search>

accent-text-colors

optional

csv list of colors

comma-separated list of html color codes

CODE 
<bilberry-booking-search
    background-colors="#395542,#1D252D,#333F48"
    text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    primary-colors="#183028,#333F48,#1D252D"
    primary-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    accent-colors="#183028,#333F48,#1D252D"
    accent-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
></bilberry-booking-search>

Upcoming Tours

Code

CODE 
<bilberry-upcoming-tours
    product-catalog-ids="1,2,3,4"
    number-of-days="50"
    few-left="10"
    title-text-customization-key="upcomingTours"
    disable-title="yes"
    group-by="month"
></bilberry-upcoming-tours>

Replace “1,2,3,4” in the code provided, with your Bilberry product IDs (Found to the left of the product names in your product overview in Bilberry)

Parameters and examples

product-catalog-ids

required

csv list of numbers

comma-separated list of product catalog ids found in Bilberry.
Only these product catalogs will be searched for.

CODE 
<bilberry-upcoming-tours
    product-catalog-ids="1,2,3,4"
></bilberry-upcoming-tours>

number-of-days

optional

number
default: 7

Number of days ahead to search.

CODE 
<bilberry-upcoming-tours
    product-catalog-ids="1,2,3,4"
></bilberry-upcoming-tours>

few-left

optional

number
default: 5

If less capacity than this, a “Few left” status will be displayed.

CODE 
<bilberry-upcoming-tours
    product-catalog-ids="1,2,3,4"
    few-left="10"
></bilberry-upcoming-tours>

group-by

optional

“day” | “month”
default: “day”

Group tours by their day or their month.

CODE 
<bilberry-upcoming-tours
    product-catalog-ids="1,2,3,4"
    group-by="month"
></bilberry-upcoming-tours>

disable-title

optional

“yes” | “no
default: “no”

The heading above the list may be hidden with this option.

CODE 
<bilberry-upcoming-tours
    product-catalog-ids="1,2,3,4"
    disable-title="yes"
></bilberry-upcoming-tours>

disable-grouping

optional

“yes” | “no
default: “no”

The grouping of tours by day or month may be disabled with this option.

CODE 
<bilberry-upcoming-tours
    product-catalog-ids="1,2,3,4"
    disable-grouping="yes"
></bilberry-upcoming-tours>

Gift Card Button

Code

CODE 
<bilberry-gift-card-button></bilberry-gift-card-button>

Parameters and examples

size

optional

“s”, “m”, “l”
default: “s”

controls size on medium to large screens

CODE 
<bilberry-gift-card-button size="m"></bilberry-gift-card-button>

xs-size

optional

“s”, “m”, “l”
default: “s”

controls size on small screens (mobile)

CODE 
<bilberry-gift-card-button xs-size="s"></bilberry-gift-card-button>

Basket

Code

CODE 
<bilberry-basket-icon></bilberry-basket-icon>

The basket-icon will only be displayed when there are items in the cart.

You might want to add the widget somewhere it will get included on every page automatically, typically the site header section.

Parameters and examples

size

optional

“s”, “m”, “l”
default: “s”

controls size on medium to large screens

CODE 
<bilberry-basket-icon
  size="l"
></bilberry-basket-icon>

xs-size

optional

 

controls size on small screens (mobile)

CODE 
<bilberry-basket-icon
  xs-size="m"
></bilberry-basket-icon>

small-on-mobile

optional

“yes” | “no”
default: “no”

makes the basket smaller on mobile by only displaying the icon and not the text

CODE 
<bilberry-basket-icon
  small-on-mobile="yes"
></bilberry-basket-icon>

variant

optional

“dense”

“dense” variant reduces padding and margin for the button.

More variants may be added later.

CODE 
<bilberry-basket-icon
  variant="dense"
></bilberry-basket-icon>

Product

Code

CODE 
<bilberry-product product-catalog-id="123"></bilberry-product>

Replace “123” in the code provided, with your Bilberry product ID (Found to the left of the product name in your product overview in Bilberry)

Parameters and examples

product-catalog-id

required

number

Id of the product catalog found in Bilberry

CODE 
<bilberry-product product-catalog-id="123"></bilberry-product>

Product Image

Code

CODE 
<bilberry-product-image product-catalog-id="123"></bilberry-product-image>

Replace “123” in the code provided, with your Bilberry product ID (Found to the left of the product name in your product overview in Bilberry)

Parameters and examples

product-catalog-id

required

number

Id of the product catalog found in Bilberry

CODE 
<bilberry-product product-catalog-id="123"></bilberry-product>

Product Details

Code

CODE 
<bilberry-product-details product-catalog-id="123"></bilberry-product-details>

Replace “123” in the code provided, with your Bilberry product ID (Found to the left of the product name in your product overview in Bilberry)

Parameters and examples

product-catalog-id

required

number

Id of the product catalog found in Bilberry

CODE 
<bilberry-product product-catalog-id="123"></bilberry-product>

Product Gallery

Code

CODE 
<bilberry-product-gallery product-catalog-id="123"></bilberry-product-gallery>

Replace “123” in the code provided, with your Bilberry product ID (Found to the left of the product name in your product overview in Bilberry)

Parameters and examples

product-catalog-id

required

number

Id of the product catalog found in Bilberry

CODE 
<bilberry-product-gallery product-catalog-id="123"></bilberry-product-gallery>

num-xs

optional

number
default: 1

Images visible on extra small screens (mobile).

CODE 
<bilberry-product-gallery 
  num-xs="1"
product-catalog-id="123"></bilberry-product-gallery>

num-sm

optional

number
default: 2

Images visible on small screens (tablets).

CODE 
<bilberry-product-gallery 
  num-sm="2"
product-catalog-id="123"></bilberry-product-gallery>

num-md

optional

number
default: 3

Images visible on medium screens (small desktop screens).

CODE 
<bilberry-product-gallery 
  num-xs="3"
product-catalog-id="123"></bilberry-product-gallery>

num-lg

optional

number
default: 3

Images visible on large screens (large desktop

CODE 
<bilberry-product-gallery 
  num-lg="4"
product-catalog-id="123"></bilberry-product-gallery>

Product Overview

Code

CODE 
<bilberry-product-overview product-catalog-id="123"></bilberry-product-overview>

Replace “123” in the code provided, with your Bilberry product ID (Found to the left of the product name in your product overview in Bilberry)

Parameters and examples

product-catalog-id

required

number

Id of the product catalog found in Bilberry

CODE 
<bilberry-product-overview product-catalog-id="123"></bilberry-product-overview>

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.

Contact Support Close