Calendly design customization

Hi @Liz,

Thank you for reply. Actually I’ve tried to contact Calendly regarding this question but they have never replied. Yes, it would be great if you share this ‘style’ request with your product team and I hope this very useful integration will be improved.

Thank you.

Hi @Bardadim That I can do! If you think of any other questions/suggestions, please let us know. :) 

Hi @Liz ,

Thank you for reply. For sure I could suggest to add some more really useful features to the form! For instance, I’d appreciate if there is an option to add fields like hand written signature or ID scanning, to create more ‘legally correct’ forms, waivers, consents etc. Also, to get more flexible style and embed customization would be really useful… 

Thank you.  

Hi @Bardadim Signatures are on the way!   I’m not sure of exactly when, but I know it’s something they’re working on. :) 

Anything particular in the embed you’d like to see as far as styling? 

Hi @Liz ,

Thank you for reply. Wow! This a good news regarding signatures, looking forward! 

Yes, it would be great to have options to customize embeddable style, for instance to chose popup windows sizes and locations, font and button sizes etc. Right now, all existing embed options are absolutely not optimized for mobiles, unfortunately. I’ve even lost some customers because it was not possible for them to close popup window(which takes entire screen size) on mobile… I’ve realized what exactly was the reason only after couple weeks of using that popup on my site.

Thank you. 

Hi @Bardadim Regarding the issue closing the popup, there should be an ‘x’ that appears to close the form. If not, do you mind sending the URL where you have the form embedded so I can take a look? 

Hi @Liz ,

Thank you for reply. In that particular case the ‘x’ for some reasons has been not visible on mobiles and when I’ve realized the issue I’ve changed embed option. Now ‘x’ is visible but extremely small(it’s size not customizable). And the popup still takes entire window including website header on mobiles. Also, on laptop, when logged in to WP admin, the ‘x’ is still not visible being covered with WP top panel. Please have a look here on mobile and advise.

Thank you.

Hi @Bardadim Thank you! It is expected behavior for the popup to take the entire window, though the ‘x’ being the current size it is isn’t normal. This is because there is some CSS styling overwriting the styles we have applied to the form, so you’ll want to check the stylesheets to remove or edit any styles that would adjust the default size and color of the ‘x.’

Hi @Liz,

Thank you for reply and sorry for delay. Unfortunately I’m not really familiar with CSS so I’d greatly appreciate if you give little more information, if possible, please.

Thank you.

Hi @Bardadim The CSS I’m referencing is specific to your site, so you would want to reach out to who helps with your site to edit the CSS. I’m afraid this isn’t something specifically I can walk you through since you’ll need to have access to the code on your site and make adjustments accordingly. 

Hi @Liz,

Thank you for reply. Actually I mange my website myself and have full access to all it’s files/code though I’m still not familiar with CSS editing. Could you please, advise?

Thank you.

@mathio solving this issue would require editing the CSS they have on their site on their own, right? I just want to be sure I’m not missing something easy!

@Liz that is correct. @Bardadim if you provide a link to your website I can have a look and see what could be the issue and maybe give a more specific advice on which CSS to change and how.

Hi @mathio, 

Thank you for reply. Please, have a look at this page pop-up on mobile. And this screenshot shows the popup window when I’m logged in to my website WP admin on a laptop, where the ‘X’ covered up by WP top panel so it can not be closed.

Please advise.  

Thank you.

Hello @Bardadim as for the small close button this seems to be on our side and we are looking into it. I will let you know when it is fixed.

As for the black WP top panel, I think you will need to set proper z-index on either the panel or you embed. Typeform popups have z-index of 10001. Anything with z-index below this value will be displayed under it, with value larger than this  will be displayed over it. We can not change this value as it might break existing implementations.

However a CSS like this might help you:

.tf-v1-popup {
  z-index: <you-custom-value>;
}

Make sure to set proper value there (larger than the WP top panel, I don’t know what value it has).

Hi @mathio,

Thank you for reply and for the information. I’m looking forward the fix and updates discussed earlier. Will try to change z-index and definitely let you know if I have any questions! Thank you for support!

Hi @Bardadim  yesterday we released a new fix for the close icon, now it is bigger and the color will adapt to the background of your typeform so that it will be more visible.

To get the new version:

1. If you used the code from the share section, you can update it again and it will show the new icon
2. If you are using our embed SDK you can get the latest version here

Let Us know if you see anything wrong with it, thanks!

Hi @Antonio,

Thank you for keeping me informed. I’ve updated the code on my website taking it from share section and unfortunately nothing has been changed. Please see it here on mobile and advise.

This is how it looks like on ‘share’ page:

And this is iPhone screenshot:

Actually, the size/color of closing button don’t bother me as much as the popup window size. For some reasons it covers my website header on mobile and make most people confused… I’ve asked random people to do it just to test. 

Your help is greatly appreciated.

Thank you.

Bardadim wrote:

Hi @Antonio,

Thank you for keeping me informed. I’ve updated the code on my website taking it from share section and unfortunately nothing has been changed. Please see it here on mobile and advise.

This is how it looks like on ‘share’ page:

 

And this is iPhone screenshot:

Actually, the size/color of closing button don’t bother me as much as the popup window size. For some reasons it covers my website header on mobile and make most people confused… I’ve asked random people to do it just to test. 

Your help is greatly appreciated.

Thank you.

Hi @Bardadim, I have looked at your website. Unfortunately we cannot predict each website how it will look, and we cannot know what is the CSS that is going to be used on that website, this is why we try to make it as customisable as possible.

Here is what you want to do in the CSS code:

.tf-v1-popup {
    top: 48px; /* make the header visible */
}


/* make the close icon more visible */
.tf-v1-close {
    filter: none !important;
    color: white !important;
}

The top property will make the popup appear below the header of the site, see screenshot.

That small code should fix your issues, let Us know.

BTW @Bardadim sorry for the confusion, but there is no need to update the code when we release a new version, the share section always gets the latest version. You only have to update the version of Embed if you use the SDK. :) 

Antonio wrote:

Hi @Bardadim, I have looked at your website. Unfortunately we cannot predict each website how it will look, and we cannot know what is the CSS that is going to be used on that website, this is why we try to make it as customisable as possible.

Here is what you want to do in the CSS code:

.tf-v1-popup {
    top: 48px; /* make the header visible */
}


/* make the close icon more visible */
.tf-v1-close {
    filter: none !important;
    color: white !important;
}

The top property will make the popup appear below the header of the site, see screenshot.

 

 

That small code should fix your issues, let Us know.

Hi @Antonio,

Thank you for reply. Actually I’m not familiar with CSS though I’ve copied/pasted the code provided to my website theme ‘custom CSS’ field. It seems nothing has been changed but the ‘close’ button color. I guess I’ve done something wrong… Please advise.

Thank you. 

@Antonio, Thank you! Actually I know about that and in this case I’ve updated the code just because nothing has been changed automatically.

Thank you, anyway!🙂

Hola, 

Por favor, es una necesidad muy importante, ¿Podrían añadir poder cambiar el color de calendly?

Personalizar eso es algo que supuestamente (visto en Calendly) se puede hacer en las integraciones; sin embargo, algo tan básico y necesario, no lo tienen contemplado.

Necesitamos poder tener una coherencia visual y mantener nuestro branding perfecto.

--Google translation--
 

Hello,

Please, it is a very important need, could you add an option to change the color of calendly?

Customizing that is something that supposedly (seen on Calendly) can be done in the integrations; however, something so basic and necessary, they do not have it contemplated.

We need to be able to have visual coherence and keep our branding perfect.

No mola nada. 💩

@ajosecorrea - i think that to make the Calendy colours, fit your brand, you will have to talk to Calendly… that is out of the control of Typeform.. 

des