BETA widgets can be customised to reflect your brand’s visual identity. This ensures your widgets blend seamlessly into your website while maintaining brand consistency.
Enhance your forms by incorporating video content that provides additional context or instructions.
Should I embed my video inside the form, or link it with the widget?
It depends on when you’d like the video to appear in the process:
Form: The video will appear within a specific form. This is useful if you want the video tied to one form but not another. Note that videos in forms are skippable, the person must press play to watch.
Widget: The video will play before the person selects which form to complete. You can also choose to make the video non-skippable, ensuring it’s watched before moving on.
Looking to add a video to you form widget
» ⤷ Adding a video to a form https://www.notion.so/beta/Forms-Explainer-d17602ddd74e45fd8dda8a5dfca89984?source=copy_link#24f16cc94ed4800387a9cd25c075c297
This guide explains how to hide the booking widget header, available on the Business tier and above, to help the widget integrate more seamlessly with your website.
?hideHeader=false to ?hideHeader=true to hide the header.Learn how to adjust the appearance of your booking widget to better match your brand.
Business Tier: Customize the header colour i.e., primary colour, replacing the default blue, and a few accent colours.
Enterprise Tier and Above: Access full colour customization, including text, button, and hover colours.
Your Custom Colour is applied to all of your widgets. This ensures consistency and good design practice throughout.
Accessibility: When customizing widget colours, please ensure legibility and accessibility in line with guidelines, the various hues of the colours in the Settings page allows you to do that.
To set color, adjust lightness (L) in the HSL color model while keeping other settings consistent. For blue, maintain the hue and saturation, and for grey, keep saturation at 0%.
Assign colors like this:
Blue0, Blue1, Blue2, Blue3, Blue4: Increase lightness in 20% steps to move from bright blue to light blue.
Grey0, Grey1, Grey2, Grey3, Grey4: Do the same for grey, from dark to light.
Adjust the bands as needed to match your brand guidelines.
Header colour customization is available for Business tiers and higher.
Access Custom Widget colour & styling to learn how to match your brand’s primary colour.
Yes, full widget colour customization (text, button, and hover colours) is available for Enterprise tiers and above.
HEX codes ensure consistent, accurate brand colours across your widget.
Any colour changes update instantly across all active widgets. Refresh your browser to see them live.
Iframes are basic html components. BETA widgets are Reactive, ie they change the size depending on their <div> container. Inside of the iframe widget, you can set the Height & Width Attributes - allowing you to set the sizing that you want. Read more here.
You can control the width and height of the embedded widget. To control the width and height of an iframe in HTML, you can use the width and height properties on the iframe itself, or use the width and height style properties. The values for the width and height properties can be specified in pixels, percentages, or other units.
For mobile devices you should ensure that the iframe’s width is allowed to expand to the full device width. If you need any help configuring the css or html for website embeds, please contact us on your Discord channel.
These are the attributes associated to iframes customisation.
<iframe
src="<https://www.sendmoregetbeta.com/>" <!-- Sets the address of the widget to embed.-->
title="description" <!-- It is a good practice to always include a title attribute for the <iframe>. This is used by screen readers to read out what the content of the iframe is.-->
height="100px" <!-- Sets the iframe height in pixels or relative as a percentage-->
width="100px" <!-- Sets the iframe width in pixels or relative as a percentage -->
></iframe>
Still Lost? We’ve got you covered!
Use the search box on the main Help to search the entire list of available help guides, or drop your question in the Support Chat!