Skip to main content
Question

react-calendly's InlineWidget won't customize colors

  • March 25, 2025
  • 1 reply
  • 122 views
A

Hello,
I’ve been trying to update the module's colors so it fits my website’s theme with no success so far.

import { InlineWidget } from 'react-calendly';

const MyComponent = () =>
  <InlineWidget
    url="{{MY_URL}}"
    pageSettings={{
      backgroundColor: "0A0B12"
      primaryColor: "007AFF"
​      textColor: "FFFFFF"
    }}
  />;
 
For the record, I’ve tried with and without the # in front of the hex code as well as with lowercase hex codes.
 
I don't see any error whatsoever but it keeps the original colors as if nothing happened.
Also, other page settings to hide details don't seem to change anything either.
 
Am I doing it the right way?
Maybe the NPM documentation is outdated.

1 reply

J
Employee
  • javayy
  • Employee
  • August 1, 2025

Hi there!

It looks like you're almost there, but I think the issue lies in the way the pageSettings are being passed to the InlineWidget. The settings need to be structured slightly differently.

Here's a revised version of your code that should work:

import { InlineWidget } from 'react-calendly';

const MyComponent = () => (
  <InlineWidget
    url="{{MY_URL}}"
    styles={{
      backgroundColor: "#0A0B12",  // Ensure you include the # symbol
      primaryColor: "#007AFF",     // Same for hex values, include #
      textColor: "#FFFFFF"         // Hex codes should always start with '#'
    }}
  />
);

A few key things to note:

  • CSS styles are passed via styles, not pageSettings, in the InlineWidget component.

  • Make sure to include the # in front of the hex color codes (e.g., #007AFF instead of 007AFF).

  • Ensure you're using the correct case for hex values (e.g., lowercase #ffffff or #FFFFFF will both work, but it's best practice to stick with lowercase).

If this doesn't solve your problem or you run into any further issues, feel free to reach out to support@calendly.com for more specific help!

I hope this helps! 😊

 

Need Help? Visit 'Get Help. Give Help.'
Terms & ConditionsCookie SettingsAccessibility statement