Slide Out Self-Booking Overlay: Deep-Linking Button
Boulevard offers the ability to create a Book Now button that deep links to a specific location while still allowing the widget to operate as a slide-out as opposed to opening into a whole new page.
Key considerations:
If the business is operating with multiple business IDs, there can only be buttons that are linked to a single business on a single page. For example, if a customer has two sites in Colorado with two different business IDs, there cannot be a single page with two book now buttons linked to different business IDs.
Every button must be created essentially from scratch. The code and directions provided below should give you all the tools you need in order to modify it in whatever way you need, but it’s going to be on a button-by-button basis.
If a single page has multiple book now buttons, you need to modify the button class from widgetButton to widgetButton# (widgetButton2, widgetButton3, etc) for as many buttons there are, especially if all the buttons do not look identical.
Things to prepare before beginning:
The font is being used by the button that is being recreated.
This can be found on the admin side of whatever website designer they are using (Squarespace, WordPress, Wix, etc.)
A screenshot of the button being recreated. Ensure that your browser is not zoomed in or out before taking the screenshot so that the dimensions will be accurate (hit CTRL+0 to zoom to 100. On a Mac it would be command+0)
A screenshot of the button when the mouse is over it. This is only needed when there is some sort of hover difference on the button.
NOTE: when designing the button using the tools provided below, the font is often incorrect until it’s previewed on the customer's web page. Especially if it’s a paid font, but works when on their website as the font is available there*
Below is a basic code snippet that generates a sliding widget button that looks like this:
<style>
.center {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.widgetButton {
background-color: #272727;
color: white;
border: none;
border-width: 2px;
border-color: none;
border-style: solid;
height:80px;
width:229px;
font-family:helvetica;
letter-spacing: 0.01em;
font-size: 20px;
transition-duration: .2s;
border-radius: 0px;
}
.widgetButton:hover {
background-color: #525252;
color:white;
border-color: white;
}
</style>
<!-- Boulevard Booking Widget -->
<script>
(function (a) {
var b = {
businessId: '0b8bc512-705d-4be9-90e4-2fad62a4e4f4'
};
var c = a.createElement('script');
var d = a.querySelector('script');
c.src = 'https://static.joinboulevard.com/injector.min.js';
c.async = true;
c.onload = function () {
blvd.init(b);
};
d.parentNode.insertBefore(c, d);
})(document);
</script>
<!-- End Boulevard Booking Widget -->
<div class="center">
<button onclick= "blvd.openBookingWidget({ urlParams: { locationId: 'f0b4fb79-a51e-448b-8835-a4e6fa542349'}})" Class="widgetButton">BOOK NOW
</button>
</div>
Button Creation Process
Before we start going through the code, we recommend using this tool for prototyping your button. This website allows you to paste your code in and run it as many times as you want to see what your final product looks like. The below instructions refer to specific lines of the code snippet above.
First, on line 33, enter the Business ID of the customer. Next, look at line 47. This is going to be where you put the location code from the customer. Both can be retrieved using Retool. Once we have these things in place, we can start work on making the button itself. You are provided links to all free online tools that can be used during this process that are very simple to use.
The first part of the button we want to sort out is the background color of the button. You can utilize this tool and simply take a quick screenshot of the button being recreated. To take a region-based screenshot on Windows, you can hit WIN+SHIFT+S. On Mac, you can hit SHIFT+CMD+4. You can then paste the screenshot into that website and click on the background of the button.
Below the picture is a box labeled “Pixel Color” you want to copy that code, including the #, and paste it where the code says “background-color” (line 10). You can then get the background color of the hover effect if there is a color change to the button color at this time using the same method, but by taking a screenshot of the button with your mouse over it. If there is no background color, simply put “transparent”.
Next, we can set the font color of the text by changing the color next to the “color” tag (line 11). You can write the name of the color, or if it’s a specific non-standard color, also put the hex code of the color using the same method as for the background color of the button.
Once we have this completed, we can move on to lines 12 -15 of the code listed above. Many buttons do not have a border, and in that case, you can leave both border width and border color as “none” if there is a border, it is measured in pixels. We can determine the width of the border by utilizing this tool. Simply take a screenshot as explained above, and paste it into this website, and highlight the border to see the number of pixels. You largely see a border be 2 or 3 pixels, and in that case, the number you would put next to “border-width” would be “2px”. For the border color, you can use the same method as for the button background color and text color outlined above.
For the button height and width (lines 16 and 17), you can use this tool and paste in the
screenshot and highlight the button. This tool is only ever going to get you most of the way to getting the exact dimensions of the button. The best way to get it exact is to take a screenshot of the button you’re recreating, and then one of the preview button and put them right beneath each other. Then tweak the numbers as needed to ensure that the new button is the correct size.
For font family (line 18), we’re going to put in the font family being used by the customer for buttons on their website. Go through the admin portal of whatever website creator they are using, and find the font being used for the buttons. You can also use this tool to upload a picture of the button which is helpful in determining what font is being used if you cannot determine it through the admin portal.
*Note: if the website is using a paid font or a nonstandard font, there is a good chance that the prototyping website is not able to display it and instead displays a default font. This is not an issue, and the font is displayed correctly when you put it on the actual website.
Letter spacing (line 19) is a bit nuanced. You’re going to need to modify this number until the preview button looks just like the button we’re recreating. So far, the current setting of .01em has been sufficient. For font size (line 20 ), this is also going to be a trial-and-error methodology. Modify by 1 or 2 and run the preview until it looks correct. If you're working with a font that we cannot preview in our prototyping website, you may need to make final font size adjustments once you’re previewing it on the actual website editor that the customer is using.
Transition duration (line 21) is only going to matter if the customer is using a button hover effect. This is the amount of time it takes for the button hover effect to complete. Generally, we've found .2 to be sufficient, but you may need to tweak this based on the customer’s theme. Border-radius (line 22) is only ever needed to be used if the customer has a non-square button. You ultimately just increase this number until it’s as rounded as it needs to be. Most commonly you set this to between 25-50px. You can also do this by a percentage, so 50% is also a valid value for this line.
Lines (23-25) are for the button hover effect. You can modify the background color of the button as well as the font color of the button based on when a mouse cursor is hovering over it. If need be, you can add any of the tags from lines 10-22 to this hover effect if any of those things change upon hovering as well. Not every customer has a hover effect.
Lines 2-8 of the code snippet can potentially be entirely removed depending on the layout and theme the customer is using. Sometimes if they use modular boxes, you can just paste in the code without the top lines, they are intended to move the button to the exact center of a given page, but some customers use themes where this is not necessary, and in some cases cause the button to move to an incorrect location. In some cases, it only needs a horizontal alignment and not a vertical alignment. In which case you would remove the top: 50% from line 4 and the second -50% from the code on lines 6 and 7 changing them instead to:
1. -ms-transform: translate(-50%);
2. transform: translate(-50%);
Overall, this process is very nuanced as entirely new buttons need to be recreated for every customer. There can even be additional CSS properties that need to be added to the code to make it as exact as possible, but this template largely covers most cases.
Button Installation
Regardless of which website builder they are using, they all have some form of “code block” as an option for the module being added. In Wordpress’s default layout, it’s called “custom HTML”, in the Avida layout designer it’s just called “Code”, in Squarespace it’s called “</> Code”. Whatever the individual case for the specific website builder in question, you add a new module right above or below the existing button of the type that allows custom code and paste in your button code. Once you go to the preview and confirm that it looks identical to the existing button, you remove the existing button from the page and save it.
Multiple Buttons on a Single Page
When there are multiple buttons that say book now on a single page, especially if they look different, we need to make several changes to the code above. Lines 9, 22, and 44 where it says “widgetButton” you would need to modify that per button created. If you’re creating a second button, name it widgetButton2 for all three of those lines. Simply increment the number per number of buttons being created. If the buttons look and act identical, you may not have to make this change, but some website creators, and even website creator themes can be quite picky with custom code, so there are cases where even identical buttons need to have the class name modified.
Specific Service Widget Supplement
Another addition that a customer may want to utilize is linking a slide-out widget to a specific service item. What we would do in that case is modify the code on line 47 to include a couple of additional URL Params: The first one is going to be adding ‘visitType’ with the ‘SELF_VISIT’ qualifier, and ‘path’ with the /cart/ URL of the individual service to which this widget is going to link.
1. <button onclick= "blvd.openBookingWidget({ urlParams: { locationId: '893203d8-8921-4e89-a8d0-fc43dfcbfc61',visitType: 'SELF_VISIT', path: '/cart/menu/Massages/s_c15b0108-d5ab-4651-8a7b-ea37fb492f7d'}})" Class="widgetButton">Book NowUTM Parameter Passthrough Supplement
An additional functionality of deep link widgets is the ability to pass in UTM parameters for use with Google Analytics tracking. To do so, we simply need to modify the section on lines 32-34 of the script above. Instead of just having a business ID, it additionally includes any UTM parameters desired as seen in the code snippet below, and modify the ‘UTMTAG’ text to whatever you’d like.
