Add Go Back to the booking page button

CSS Codes Appointment Booking
1

Add this code to the Custom CSS field on the Settings tab of your Appointment Booking widget’s settings:

[class*='current-timeslot__Container-sc'] {
flex-direction: row-reverse;
gap: 24px;
}

[class*='current-timeslot__Container-sc']
[class*='current-timeslot__DateTime-sc'] {
width: 100%;
}

[class*='current-timeslot__Container-sc'] [class*='link-button__Container-sc'] {
position: relative;
width: 90px;
}

[class*='current-timeslot__Container-sc']
[class*='link-button__Container-sc']::after {
position: absolute;
top: 50%;
left: 0;
padding: 4px 10px 4px 12px;
content: 'Go Back';
background: rgb(255 255 255);
border-radius: 8px;
transform: translateY(-50%);
}

[class*='current-timeslot__Container-sc']
[class*='link-button__Container-sc']::before {
position: absolute;
top: 50%;
left: 0;
z-index: 2;
width: 12px;
height: 12px;
content: '';
background: url('data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTYgMTYiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05LjU3NiAyLjU3NmEuNi42IDAgMCAxIC45MTguNzY1bC0uMDcuMDgzTDUuODUgOGw0LjU3NSA0LjU3NmEuNi42IDAgMCAxIC4wNy43NjVsLS4wNy4wODNhLjYuNiAwIDAgMS0uNzY1LjA3bC0uMDgzLS4wNy01LTVhLjYuNiAwIDAgMS0uMDctLjc2NWwuMDctLjA4MyA1LTVaIj48L3BhdGg+Cjwvc3ZnPgo=');
filter: invert(29%) sepia(94%) saturate(3353%) hue-rotate(205deg)
brightness(94%) contrast(106%);
transform: translateY(-50%);
}
1 Like