Appointment Booking customization

[Ingrid_van_Waard]

Thanks, Max! Good to see this widget LIVE!
Great that the option to hide the whole business presentation on the right was already added (one of my additions to the wishlist😊).

I already started trying the widget and added it to a contact page of a website that I’m still working on.
However, the sizing of the little picture on the left (next to the heading) is uncontrollable. I used just an icon but it makes no difference how small or large the file is that I upload. It renders HUGE (and therefore clipped). So we probably going to pester you for the correct selector to address it in the CSS panel?

I also wonder whether there is a way to hide the heading “Book an appointment” on top of the things we can write ourselves. It’s not ‘really’ an appointment in this user case, so I’d prefer to stick to just describing it in the headline above the available dates.
Probably easy to hide the first header if you know the selector for it and can do a ‘display:none’ on it. And then clip off the empty space that it will leave behind by setting a negative margin-top, or something like that.

Can you please give away the secrets of how to address these elements? The heading, the container, the small picture? That would be super helpful for the half-witted coders like me who can then tinker around with the values until it looks right. I could waste hours on Google Inspect /Dev Tools but that’s above my skills. I never get it exactly right, and copying parts from the CSS on other widgets also rarely works fully identically.

Kind regards,
Ingrid

[Max]

Hi there @Ingrid_van_Waard

Happy to hear that you love the new app! Thanks a million for your feedback

Regarding your questions:

1. I’ve checked your widget and don’t see the picture there anymore. Could you please add it once again? I’ll gladly look into this for you

2. You can change the heading text in the Edit Texts section on the Settings tab:

I’ll also ask devs to provide the CSS code to hide this heading and will get back to you tomorrow

3. Unfortunately, I didn’t quite understand what container you mean. Could you please elaborate on it?

[Ingrid_van_Waard]

Thanks for the quick response, Max!
Yes, regarding 1) I have put the picture back and you can see that it is small and as intended as long as the widget is 600px wide or more. As soon as it is less, it jumps up and fills out the full column width of the widget (2nd screenshot).
2) Thanks, I found this option to change that heading by just typing a few spaces instead (but it leaves the unused spot behind).
3) I see the word “container” often in the coding that addresses the whole size or position of a widget. E.g. in the review slider, it sets the height (if I remember well) so that they all will be identical height. I did not mean anything in particular, just an indication of things we never know the exact names for without asking . I was thinking that would e.g. be usefull to adjust too much white space if removing the header leaves too much empty space on the topside of the widget. But it might actually have a different name if you want to clip off that top end by using a negative margin. So just guessing…

[Max]

Ah, got it, thanks

I’ll check it with the devs too and will get back to you tomorrow!

[Max]

Hi @Ingrid_van_Waard

With this code, you can hide the title and the line below and there won’t be any extra spacing at the top:

[class*="typography__Title1-sc"] {
  display: none;
}

[class*="current-service-card__Container-sc"] {
  border-top: none;
}

Try it out and let me know how it worked

Regarding the image resizing, I’ve talked to the devs and they’ve confirmed that this is an intended behavior. However, the images should be resized when the width is 480 px and less, but not 600 px. So, we’ll adjust this issue as soon as possible.

Please let me know if this explains things or if you have any questions left

[Ingrid_van_Waard]

Thank you very much, Max.
Yes, that code neatly removed the large heading and the space for it! And the trick of using the translations panel to remove unnecessary things (replacing them with a space) works also to remove “afternoon” and “evening” (everyone knows that 20.00 is evening, no need to add it).
When I removed “Free” because it also felt too obvious to emphasize with a subheading, it left a bold dot behind. Not sure where that came from.

Regarding the image resizing, I replaced the icon with a normal image to see whether the icon was the culprit, but when you see it on mobile, it still cuts the picture. I will use it without an image for now, should the website where I paced it go live before it’s solved, that’s no issue.

This happens when you see it on mobile and the picture gets super big suddenly:

Thanks again for giving the code and showing the class of the ‘container’. I also added “padding: none;” to where it says “border-op: none” to make it fit in more naturally. How would I address it to display the whole widget at 90%? It all looks a bit bigger than needed for my user case, as it’s just a little panel added into a section about having a first talk with us, and at 90% it would fit with the standard column width of the layout and in general more in line with the environment.

Kind regards,
Ingrid

[Max]

Happy to hear that the code worked for you. Regarding the new questions:

1. This code will help you remove the bold dot:

[class*="typography__Body1-sc"]:last-child {
  display: none;
}

2. With this code, you’ll be able to adjust the widget’s height:

[class*="days-carousel__Container-sc"] {
  gap: 12px;  
}

[class*="slot-picker__Container-sc"] {
  gap: 12px;
}

[class*="datetime-picker-button__Button-sc"] {
  width: 90px;
  height: 38px;
}

3. And this CSS code should resolve the issue with the cropping image on mobile:

[class*="MediaImage__Container-sc"] img {
  object-fit: contain
}

Please check these solutions and let me know how they worked

[Ingrid_van_Waard]

WOW! That’s a quick response!
Elfsight support is again breaking all records! I guess you need to be in a user’s shoes to understand how special it is to get this kind of support when you actually want to do things that are going BEYOND the standard options of the widget that you, so to say, paid for. Most app providers do not even deliver that level of dedicated support when there is a fault, a real problem and a panic with something broken on your website, let alone if it is a wish for just an EXTRA tweak!
Before I heard the widget was launched I used Calendly (which was new to me so a similar new app experience) and it took me 3 times as long to set the basic settings for hours and connect my Google Diary. But when their widget behaved badly on responsiveness, I never even got a reply from their ‘Support’. You have to take it with the setting on offer or leave it. None of the other app providers would even think of letting their devs make an effort to fulfil the extra wishes.

I will go and experiment with it, Max! And let you know, but I think I now have all the handles. That looks like some code that makes it very adjustable!
Kind regards,
Ingrid

[Max]

@Ingrid_van_Waard Your words made our day! It’s such a pleasure to hear these kind words about our service. Thanks a million for your lovely feedback

If anything else comes up, we are always here to help

[Ingrid_van_Waard]

Hi Max,
I had a play with the code that you have sent. Always fun! Love it to see which code changes what!
And of course, that prompts a few more questions. But please, this is NOT a support priority at all. The widget is very useful just as it is now, and I am just finetuning it for a website that is not even live yet! So I’m only giving my observations in the eye of the larger picture, and not because I need more of your support resources instantly.

First of all, it seems like the widget container keeps more margin to the left than to the right. Please see screenshot 1. It’s what the Calendly widget did too, but then it was even worse, so bad that the widget fell half off the page (with no support responses!!!)

Secondly, when a day is cut off half/half in the data picker, you would expect to see that day in the next scroll. However, on using the scroll arrow to the right, that day is skipped and is therefore difficult to click on. It’s not in the first view, but not in the 2nd either. At first, I thought I should finetune the sizing in the CSS until it shows only full days in view, but I then realised that you could never prepare for all screen sizes. So probably something only the devs can solve, or it’s my fault because I changed the sizes. You see it in the screenshot that shows the widget twice. The Wednesday is half cut off and doesn’t appear in the next scroll, so can never be properly clicked. See the 2 screenshots from a mobile phone.

Then lastly, the last screenshot shows a huge amount of white space in the widget still. Also probably because I gave the image a maximum size to keep it looking like a profile pic, not a big portrait. If I’d use the icon of a phone, as I had first, I would not want it super big either. But at the bottom end, the white is also too much.

Hope you can see the things I tried to explain with the help of the screenshots
and no urgency to look at this immediately, just some input from a user case ,
kind regards,
Ingrid

[Max]

Hi @Ingrid_van_Waard

Thanks for bringing this to our attention!

I see that your website is password protected now. Could you please send it to me in private messages? I

I’ll be happy to look into this for you

[Ingrid_van_Waard]

Hi Max, the website for Reflections Web Design & Marketing is not yet live, but there is a “view only” option at Squarespace for a website in production. No need to keep the password for that a secret. Any accidental viewer will find a mix of pages that are ready and pages that are not re-written yet and still about Riverdale Rural Holidays (I started from a copy of that website to build a website for my own business).

The URL is https://try-out-reflections.squarespace.com and it can be viewed with the password I’ve sent to you. Yes, really, that is what I use all the time when showing a half-finished product to other people. The widget that you are looking for is on the page TRY-NOW, the last item of the menu (the CTA button), https://try-out-reflections.squarespace.com/try.

In case access to editing mode is needed, I have sent an admin invite to the Elfsight support team at the email address support@elfsight.com. That’s the email I remembered from previous assistance but let me know if I got the email address wrong.
Kind regards,
Ingrid

[Max]

Hi @Ingrid_van_Waard

I’ve checked your page on mobile and don’t see any issues at the moment:

Could you please double-check it?

If the issue still persists, please try to check your website in incognito mode. In case it still didn’t help, please specify the device you are using.

I’ll gladly check it for you