Search code examples
javascripthtmlreactjstypeform

Cant get createSlider from @typeform/embed to work in React

I am trying to get @typeform/embed to work in React. I want to see them all before deciding which one is best for the case where I want to use it.

All types are imported and css is imported:

import { createPopover, createPopup, createSidetab, createSlider, createWidget } from '@typeform/embed'
import '@typeform/embed/build/css/widget.css';
import '@typeform/embed/build/css/popup.css';
import '@typeform/embed/build/css/popover.css';
import '@typeform/embed/build/css/sidetab.css';
import '@typeform/embed/build/css/slider.css';

In my code I have a dropdown menu to select the form I want to use. that value will be set with useState. createWidget, createSidetab and createPopover are all working without problems

createWidget(formSelect, {container: document.querySelector('.formDiv') })
createSidetab(formSelect);
createPopover(formSelect);

However createPopup and createSlider arent showing up. Does anyone know how to let them show up?

createPopup(formSelect, {width: 500, height: 250})
createSlider(formSelect, {container: document.querySelector('.slideDiv')});

Maybe I use the wrong options, I don't know, can't get those working, while the other 3 are working absolutely fine!

**UPDATE: got createPopup to working using the 'open: "load"' option

Hope anyone can help me, thank you in advance!

Solution

  • When you call createPopup it creates the popup instance but it is up to you to open it.

    You can open it based on a user action, eg. button click:

    const open = (e) => {
  e.preventDefault();
  createPopup(formSelect, { width: 500, height: 250 }).open();
};

return <button onClick={open}>click to open popup</button>;

    Or you can open it automatically as you did with custom launch options: { open: "load" }.

    You should be able to use both approaches for createSlider too.

    I have just discovered custom launch options (eg. { open: "load" }) is broken for embed types other than popup. We are releasing a fix for the embed library to resolve this. Please install latest version of the @typeform/embed lib (>= 1.1.4).