Ripe Docs
  • Welcome to Ripe Docs
  • Getting Started
    • Connect your product data
    • Connecting your CRM
  • Connect Product Data
    • Connect with Segment
    • Connect with Tag Manager
    • Connect with Ripe SDK
      • Install the Ripe SDK Script
      • Ripe.identify
      • Ripe.track
      • Ripe.page
      • All Ripe SDK Calls
    • Connect with Ripe API
  • Sync CRM
    • Connect Salesforce
      • Key Concepts Overview
      • Timeline data
      • Automatic entity creation
    • Connect HubSpot
      • Key concepts Overview
      • Sync Modes
      • Automatic entity creation
      • Workflows & Automation
      • Timeline data
  • Widget customization
    • Page targeting
    • Widget visibility
    • Widget position & offset
    • Personalization Variables
  • Ripe Concepts
    • Leads
    • Companies
    • Workflows
    • Videos
      • Profile videos
      • Sending videos
    • Sessions
  • How-to
    • Whitelist Ripe in your CSP
    • Identity resolution
Powered by GitBook
On this page
  • Open
  • Close
  • Events
  • Complete example
  1. Widget customization

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>
    )
}
PreviousPage targetingNextWidget position & offset

Last updated 5 months ago