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! 