Sidetab Button Not Rendering with Custom Styles Configured in Typeform UI

[AlinaMatuschak]

I’m reaching out regarding an issue with the Sidetab button not rendering with the custom styles (text, icon, and color) that I’ve configured in the Typeform UI.

Here are the details of the issue:

Embed Method: I’m using the Sidetab from @typeform/embed-react library in a React application.

Expected Behavior: The Sidetab button should display the custom text, icon, and color configured in the Typeform UI.

Current Behavior: The button either doesn’t appear or renders with default styles, ignoring the customizations made in the Typeform UI.

Button customized in the Typeform UI:

And what on the website:

My code:

<Sidetab
  id={form.id}
  hidden={params}
  autoClose
/>

[joycevherck]

Hi @AlinaMatuschak

If you're using the Embed SDK, you'll need to add those styles to your code.

<Sidetab
  id={form.id}
  hidden={params}
  autoClose
  buttonText="Report problem"
  customIcon={icon}
  buttonProps={{ style: { backgroundColor: '#000000'} }}
/>

In order to use the styles set in the Typeform admin, you'd have to use the embed code generated in the admin. See help center article here