Top
Login
Contents x
Configure Mutation Observer
  • 11 Dec 2024
  • 2 Minutes To Read
  • Print
  • Dark
    Light
  • PDF
Contents

Configure Mutation Observer

  • Updated On 11 Dec 2024
  • 2 Minutes To Read
  • Print
  • Dark
    Light
  • PDF
Article summary

What is MutationObserver?

MutationObserver is a web API that enables developers to observe changes to the DOM (Document Object Model) of a web page. When enabled, MutationObserver listens for specific types of mutations or changes in the DOM and triggers actions based on those changes.

In the case of Whatfix, when Mutation Observer config is enabled, Whatfix monitors mutations on the page that match the specified configuration. This configuration is used by Smart-Tips, Beacons, Launchers, and Smart Context.

By defining this configuration, Whatfix can use the MutationObserver API to monitor changes happening on the page. This enables Whatfix to dynamically adjust its content, such as Smart-Tips, based on changes in the underlying web application's DOM structure. For example, if elements on the page are dynamically added or removed, Whatfix can detect these changes and adjust its tooltips accordingly.

Use the following steps to configure Mutation Observer:

  1. On the Whatfix Guidance dashboard, click Settings.
    ia_left_nav_settings

  2. Click Advanced customisation.
    ia_settings_advanced%20configuration

  3. Click Technical configuration.
    ac_tech config.png

  4. Click Add preferences.
    tech config_add prefrences.png

  1. Based on what mutations you want to monitor, Whatfix enables you to configure the Mutation Observer for the following:
Smart Tips, Beacons, and Launchers

  • Click Common Properties.
    tech config_common properties.png

  • Select the Mutation Observer Config checkbox.
    tech config_enable mutation observer config.png

Page Tags

This config is used by Smart Context to re-evaluate all widgets if Page Tags have changed due to these mutations.

  • Click Common Properties.
    tech config_common properties.png

  • Select the Mutation Observer Config for Smart Context checkbox.
    tech config_enable mutation observer for smart context.png

User Actions

  • Click User Action.
    tech config_user action.png

  • Select the Mutation Observer Config for User Action checkbox.
    tech config_enable mutation observer for ua.png

  1. Click Add.
    tech config_add button.png

  2. In the Config dropdown, select what mutations you want to observe.
    image.png

Note

Whatfix observes the following types of mutations:

Attributes: When an HTML element changes its characteristics, like its class or ID, it's called an attributes mutation. For example, if a button's color changes from blue to red, that's an attribute mutation.

Child List: Child list mutations happen when new things are added or taken away from a section of a webpage. This could mean adding or removing things from that list or changing their order. For example, if you add a new item to a shopping cart on a website, that's a child list mutation because you're changing what's inside the container.

Subtree: Subtree mutations occur when anything inside a specific part of a webpage changes. This could be anything from changing the size of an image to adding a new paragraph. If it happens within the area we're looking at, it counts as a subtree mutation.

  1. Click Save.
    tech config_save.png
Was this article helpful?
What's Next
Privacy Policy | Whatfix Glossary | Whatfix Platform Status
Copyright © 2024 WHATFIX TM. All rights reserved.
Change password!
Changing your password will log you out immediately. Use the new password to log back in.
Change profile
Success!
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.
Logout