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!
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).