Overview
Anchor to Element enables you to attach content to a specific element on a webpage, ensuring it remains aligned with that element 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 user scrolls the page, the content moves along with the element, maintaining its alignment. For example, if you anchor a tooltip to a button, the tooltip remains attached to the button while scrolling.
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 misalignment 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 anchored to an 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 jump or do not move smoothly while scrolling, anchoring them to an element keeps them aligned and ensures smooth movement with the page.
Relevant guidance: If content needs to stay aligned with a specific element, such as a sidebar or form field, anchoring ensures it remains relevant as the user scrolls.
Stable positioning for dynamic elements: If elements change position or size, such as floating action buttons or pop-ups, anchoring keeps the content properly aligned as they move or resize on the page.
Scrollable containers: If content is placed inside a scrollable container (a section that users can scroll through), anchoring the content to the element enables the content to move along with the scrollable section.
Use the following steps to anchor a Beacon to an element:
Create content using Whatfix Studio or edit the content using the Dashboard that you want to anchor.
On Studio, under Configurations, click Additional options.
Enable the Anchor to Element toggle.
Note:
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.
Continue creating or editing the content as needed.
Click Save Tip.