.openWidget()

Opens the Grow widget. Within the widget, readers can search the site, access their Grow bookmarks or account information, or share the current page.

The .openWidget() method provides a programmatic way to open the Grow widget and specify its placement via several parameters.

Syntax

window.growMe.openWidget(parameters)

Parameters

Name Type Description
widgetReferenceElement HTMLElement optional

Specifies a reference element to anchor the Grow widget UI. Other parameters fine tune the placement. Typically, this element is the one that triggers the opening of the widget.
widgetPositionStrategy string optional

Sets the position attribute of the widget. Accepts the following values:
- fixed
- absolute
widgetPlacement string optional

Sets the preferred placement of the widget relative to the reference element. Accepts the following values:
- auto
- auto-start
- auto-end
- top
- top-start
- top-end
- bottom
- bottom-start
- bottom-end
- right
- right-start
- right-end
- left
- left-start
- left-end
widgetOffset array optional

Offsets the popover (in pixels) from the reference element. Accepts an array with two numbers in the form of [skidding, distance].

Skidding moves the popover’s placement along the reference element. For example, if widgetPlacement is set to right, the widget would move up and down along the right side of the reference element.

Distance moves the popover away from (or toward) the reference element in the direction of its placement. For example, if widgetPlacement is set to top, the widget would move away from or toward the top of the reference element.

Positive numbers move the popover further away; negative numbers will overlap the reference element.

Return Value(s)

  • None.

Example(s)

The following example creates a function that will open the Grow widget, anchoring it to an element with the ID #custom-growme-widget-ref. The popover opens in a fixed position at the bottom-right of the reference element, with a distance of 10 pixels away from it. Errors are logged to the console.

function callOpenWidget() {
  try {
		window.growMe.openWidget({ 
			widgetReferenceElement: document.querySelector("#custom-growme-widget-ref"), 
			widgetPositionStrategy: "fixed", 
			widgetPlacement: "right-end", 
			widgetOffset: [0, 10]
		})
  } catch (e) {
    // Handle Error
    console.log(e)
  }
}