Widget Placement

Define Mounting Points

Envive has defined a standard set of div's for us to mount the widgets to. The div ID's specify widget types (primarily based on sizes) that let you define where you'd like the widgets to be mounted on your pages and move them as needed.

Envive will work with you to on placement recommendations and which div ID to use for each placement so we load the correct widget. If you want to adjust the placement of a widget you can move the specified div on the page and Envive's corresponding widget will target that new location. If you want to change the underlying widget type, work with your CSM as there would be changes to make on both sides.

Below is a list of the available divs that you can add to your site.

Product Detail Pages (PDP) divs:

envive-pdp-widget-small

<div id="envive-pdp-widget-small"></div>

• This widget is only used for the Suggestion Bar widget, which is typically located near the top of a PDP

• Example:

envive-pdp-widget-medium

<div id="envive-pdp-widget-medium"></div>

• Used for mid-size widgets when placed within the sidebar

• Widgets that can target this div: Chat Preview, Social Proof

• Example:

envive-pdp-widget-large

<div id="envive-pdp-widget-large"></div>

• Used for the largest widget placement, inserted as a full row

• Widgets that can target this div: Chat Preview, Social Proof

• Example:

Product Listing Pages (PLP) divs:

envive-plp-widget-card

<div id="envive-plp-widget-card"></div>

• Used in place of a product card in a grid

• Widgets that can target this div: Image Prompt Card (using your own custom image)

• Example:

envive-plp-widget-row

<div id="envive-plp-widget-row"></div>

• Similar to the envive-pdp-widget-large, but for PLP use. Used when widgets are intended to occupy an entire row.

• Widgets that can target this div: Chat Preview, Social Proof

• Example: