Developer docs
Below you'll find information on how to add the Heybooker widget on your website. The documentation includes information on the following:
- How to create an iframe, add parameters and other features to the map
- The different parameters that you can use to customize the map
- How to set iframe attributes to make the map responsive to different screen sizes
Constructing the <iframe> URL
The Heybooker widget is added to a page through an <iframe> and you can
customize the widget by specifying different URL parameters in the src attribute
of the <iframe> tag.
The easiest way to get the embed code for the widget is to simply copying it from the Heybooker dashboard when you've created a map.
Code
Here's an example just to demonstrate how the code looks like
<iframe
width="100%"
height="428"
src="https://dashboard.heybooker.com/map/?uid=7dea3b57-3c29-412b-bb6a-c4877f853ea6"
frameborder="0"
></iframe>The code above will generate this map:
URL Parameters
The only parameter that is required in the iframe URL is the uid parameter.
Map UID
The uid parameter is needed to track the bookings that are made. It is generated and included
in the embed code that you can see in the Dashboard
Login to your dashboard to find out what it is if unsure.
| Param. name: | Example: |
|---|---|
uid |
uid=13c5bf54-4d08-4d5f-a18b-ec317fb759b0 |
Location
If you want to set the location programmatically you can do so using the latitude
and longitude parameters.
| Param. names: | Example: |
|---|---|
latitude and longitude |
latitude=40.7505045&longitude=-73.9934387 |
Dates
Provide a checkin date and/or checkout date. If omitted, the map will show availabilities for checkin the next day and checkout the day after.
If check_out is empty, it will default to check-in + 1 day.
Dates should be specified in this format: YYYY-MM-DD.
| Param. name: | Example: |
|---|---|
check_in and check_out |
check_in=2022-04-22&check_out=2022-04-24 |
Here is an example URL (that you would put in the src attribute of an <iframe>:
https://dashboard.heybooker.com/map/?uid=7dea3b57-3c29-412b-bb6a-c4877f853ea6&fs=1&latitude=40.177624&longitude=44.51262&check_in=2023-07-16&check_out=2023-07-17
Widget size
You can set size of the map using the width and height attributes or CSS properties of
the <iframe>
We recommend setting the width to 100% and the height to a minimum of 428px.