👀Widget visibility

Control when and in what state the widget opens

Open

In some situations it could be useful to control when the widget opens. This can be done by using the window.Ripe.openmethod. By passing the optional argument you can also control in what state the widget opens.

window.Ripe.open(state)

Open takes a optional argument for what state the widget is opened in.

State argument (optional):

'MINIMIZED' | 'INITIAL' | 'FULL' | 'CALENDAR'

Example

window.Ripe.open('CALENDAR')

Close

It's also possible to close the widget by using the window.Ripe.close method.

window.Ripe.close()

Events

ripe:ready

This event is emitted when the widget has loaded and is ready to be displayed. Meaning all necessary data has been loaded, the lead has an owner and calendar has been toggled on, either by qualification to a workflow or by toggling it on manually from the lead view.

Example

window.addEventListener('ripe:ready', () => {
    setShowTalkToSalesButton()
})

Complete example

Talk to sales button

const TalkToSalesButton = () => {
    const [showTalkToSalesButton, setShowTalkToSalesButton] = useState(false);

    useEffect(() => {
        window.addEventListener('ripe:ready', () => {
            setShowTalkToSalesButton(true);
        })
    }, []);
    
    if (!showTalkToSalesButton) {
        return null;
    }
    
    return (
        <Button 
            onClick={() => {
                window.Ripe.open('CALENDAR');
            }}
        >
            Talk to sales
        </Button>
    )
}