Anchor content to an Element

Your title goes here

Anchor to Element is a Beta feature. To enable the feature, contact support@whatfix.com.

Overview

Anchor to Element enables you to attach content to a specific element on a webpage, ensuring it remains aligned with that element even as the end user scrolls. When you anchor content to an element, the content's position is relative to the element it is attached to. As the end user scrolls the page, the content moves along with the element, maintaining its alignment. This means if the user scrolls down the page, the content moves with the element rather than staying fixed in one place on the screen. For example, if you anchor a tooltip to a button, the tooltip stays attached to the button as the user scrolls.

Whatfix enables you to anchor a Smart Tip icon, Beacon, and Launcher to an element.

Consider that you have a Beacon attached to a link inside a scrollable sidebar within your application. Without anchoring, the Beacon might keep jumping or moving out of alignment as the user scrolls through the content. Anchoring the Beacon to an element within the sidebar ensures that the Beacon stays in its intended position, preventing it from jumping or misaligning as the user scrolls. This approach is particularly useful when Whatfix widgets don't scroll smoothly with the rest of the application, providing a more stable and consistent user experience.

Here’s how the Beacon looks when it’s not being anchored to the element:

Here’s how the Beacon looks after being anchored to the element:

When to use Anchor to Element?

• Smooth Widget Movement: If Whatfix widgets appear to jump or do not move smoothly when the user scrolls, anchoring content to an element ensures that the content stays properly aligned and moves smoothly with the page.

• Contextual guidance: When you want content to stay aligned with a specific element, such as a sidebar or a form field, ensuring that the content remains relevant as the user scrolls.

• Dynamic elements: For elements that may change position or size, such as a floating action button or a pop-up, anchoring to the element ensures that the content stays appropriately aligned, even as the element moves or resizes on the page.

• Scrollable containers: When content is placed inside a scrollable container (a section that users can scroll through), anchoring to the element enables the content to move along with the scrollable section.

Use the following steps to anchor any content to an element:

1. Create content using Whatfix Studio or edit the content using the Dashboard that you want to anchor.

2. On Studio, click the ADVANCED OPTIONS tab.

3. In the More Options section, enable Anchor to Element toggle.

   Your title goes here

   • Ensure that you select only one anchoring option based on your requirement. If both Anchor to Element and Anchor to Page are enabled for a content, the Anchor to Page toggle is automatically disabled, and the content behaves as if it were anchored only to the element.

   • Ensure that the element you're anchoring to is visible on the page. If the element is hidden or removed, the anchored content also disappears.

4. Continue creating or editing the content as needed.

5. Click Save.