Pebble can easily be added to any type of website (Wix, WordPress, Squarespace, GoDaddy or any other kind of website). You can do this one of 2 ways:
Add a standard text link to your site
Add an iFrame (booking window) to your site
1. Add a standard text link to your site
How to get your link
1) Login to the supplier portal. Navigate to āSettingsā.
2) Select āSupplier page detailsā.
3) Ensure you have completed the "supplier page" by adding your photo and filling out all of the information. A button which says āview supplier pageā will now appear. Click this button and then copy your supplier page link. It should look similar to this: *https://activities.bookpebble.co.uk/supplier/e7211e65-0c81-44f4-ba42-3388481c7510*
Add a standard text link to your site
You can add a standard text link anywhere on your own website. To add a standard text link to your own website, replace the text in italic below by your own supplier page link, which you copied from the supplier portal; and then just copy and paste the following code to where you want the text link to be on your website:
<a href="YOUR-SUPPLIER-PAGE-HEREā>Book on Pebble</a>
This will display the link like this - Book on Pebble. You can change the text in bold to display a different text for the link, for example, Book a Class or Book Online.
2. Creating an iFrame for your Website
How to get your iFrame
First, head to the integration section of the supplier portal:
You'll then see the options to create 3 different iFrames:
i) Browse Listings -> Activity Details -> Checkout
This will create an iFrame that will house all your Pebble activities to display on your website. Your customers will be able to browse your list of classes, see more information about each class, and proceed to checkout.
For this view you'll be able to customise:
a) The class category that is shown within the iFrame:
If you select a specific category then only classes tagged with that category will show within your iFrame.
b) Button colour:
You can choose from five different buttons colours so the iFrame sits more seamlessly within your website.
c) iFrame height:
You can choose from three recommended iFrame heights, or set a custom height. We've found that 90% of people who book via Pebble use their mobile phones so we would recommend you use the 'Small' height option as this is optimised to sit nicely in a mobile phone screen.
Please note: The iFrame width is set to 100%, which means that is designed to be fully responsive to the width of your website and it will work well on any device.
Once you've selected your customisation options click 'Generate' - you'll then be able to copy the iFrame code from the box in the section below. See section 2.a for how you can add this to your website.
ii) Activity Detail -> Checkout
This creates a detailed view of a single class within an iFrame. If your customers want to book this class then they will be able to checkout from the iFrame.
For this view you'll be able to customise:
a) The activity that is shown within the iFrame:
Choose from a list of your upcoming activities to create an iFrame that holds a detailed view of that specific class.
b) Button colour:
You can choose from five different buttons colours so the iFrame sits more seamlessly within your website.
c) iFrame height:
You can choose from three recommended iFrame heights, or set a custom height. We've found that 90% of people who book via Pebble use their mobile phones so we would recommend you use the 'Small' height option as this is optimised to sit nicely in a mobile phone screen.
Please note: The iFrame width is set to 100%, which means that is designed to be fully responsive to the width of your website and it will work well on any device.
Once you've selected your customisation options click 'Generate' - you'll then be able to copy the iFrame code from the box in the section below. See section 2.a for how you can add this to your website.
iii) Checkout only
This creates a booking and checkout view for a specific class within an iFrame. Your customers will be able to select dates/times and then proceed to checkout.
For this view you'll be able to customise:
a) The activity that is shown within the iFrame:
Choose from a list of your upcoming activities to create an iFrame that holds a detailed view of that specific class.
b) Button colour. You can choose from five different buttons colours so the iFrame sits more seamlessly within your website.
For this view you won't be able to customise the iFrame height. We've found that 90% of people who book via Pebble use their mobile phones so we've preset this iFrame height to 680px which is optimised for mobile phones. However if you would like to customise the height then you'll have the option to do so by updating the pixel number shown below when you paste the code into your website:
The iFrame width is set to 100%, which means that is designed to be fully responsive to the width of your website and it will work well on any device.
Once you've selected your customisation options click 'Generate' - you'll then be able to copy the iFrame code from the box in the section below. See section 2.a for how you can add this to your website.
Add an iframe (booking window) to your site
Your website provider details all the information you need to add an iFrame to your website. You can find links to the iFrame set-up pages for the most popular website providers below.
Don't worry if you don't see your website provider below. Our support team are always available if you need a hand to setting up. Contact the team at support@bookpebble.co.uk and they will come back to you ASAP.
Squarespace iFrame instructions
Head over to your Squarespace page. While in edit mode, insert an Embed content block section where you would like your Pebble iFrame to appear.
Select the
< / >icon. A new box will open labelled Embed Data. In this box, paste the code copied from your Embedded iframe, then select Set, then Apply.You can edit this section to appear wider if needed. We recommend always giving the iframe as much width space as possible on the page.
When you're happy, save your changes. Your Pebble iFrame will then appear on your Squarespace page
See more information from Squarespace here.
Wordpress iFrame instructions
Adding an iframe to your WordPress account may seem a bit tricky, as WordPress doesn't support iFrames directly in their editor section. But don't worry, if you have a Business or eCommerce WordPress plan you can just install an iframe plugin and you'll be all set.
Hereās a list of iframe plugins for WordPress.
With your preferred iframe plugin installed, simply paste your copied iframe into your page through the iframe plugin while you're in edit mode.
Godaddy iFrame instructions
Firstly, visit your Home page
Select Page setup in the top right corner. You'll then see automatically generated HTML codes for a Button link, a Standard link, and an Embedded iframe on the left-hand side.
Select Embedded iframe and copy the code.
To add your Pebble iFrame to your GoDaddy website, head to your GoDaddy product page.
Scroll to Websites + Marketing and select Manage next to your website to open your site. Then choose Edit Website or Edit Site to open your website builder.
Head to the page and location you want to add your iframe to and select Add section.
Search for HTML in the top bar and select Add.
Paste your copied iframe code into the Custom Code field on the right.
Changes are saved automatically, and you can Preview or Publish your page as needed. You've now successfully embedded your Pebble iFrame into your website. If required, GoDaddy explains this process further here.
Wix iFrame instructions
Visit your Home page and select Page setup in the top right of that page
You'll see on the left-hand side automatically generated HTML codes for a Button link, a Standard link, and an Embedded iframe.
Select Embedded iframe and copy the code in the Embedded iFrame box
Head over to your home page. While in editor mode, select Add elements (+) in the top left menu, Embed code, Popular Embeds then Embed HTML:
From here, select the (+) button to Add to Site
After you've added the embed section, select Enter code and paste the iframe code under Add your code here (HTTPS only) before selecting Update
You can also use the width and height drag tools in this section to adjust the size of your Pebble iFrame. However, we recommend using the widest setting to make your entire Pebble iFrame visible.
Your Pebble iFrame will then be embedded onto your website and ready to use on your website when it's published.
Need more info? Wixās help library explains the process in more detail.
We value your input and are always looking for ways to improve our communication and services.
If you have any questions or feedback, please donāt hesitate to get in touch with our CS team at support@bookpebble.co.uk or on the live chat support.