--- title: "Mutation Observer Config" slug: "mutation-observer-config" updated: 2024-12-11T13:30:16Z published: 2024-12-11T13:30:16Z --- > ## Documentation Index > Fetch the complete documentation index at: https://support.whatfix.com/llms.txt > Use this file to discover all available pages before exploring further. # Configure Mutation Observer #### What is MutationObserver? [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) is a web API that enables developers to observe changes to the [DOM (Document Object Model)](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) 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](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_left_nav_settings.png) 2. Click **Advanced customisation**. ![ia_settings_advanced%20configuration](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_settings_advanced%20configuration.png) 3. Click **Technical configuration**. ![ac_tech config.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ac_tech%20config.png) 4. Click **Add preferences**. ![tech config_add prefrences.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/tech%20config_add%20prefrences.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](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/tech%20config_common%20properties.png) - Select the **Mutation Observer Config** checkbox. ![tech config_enable mutation observer config.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/tech%20config_enable%20mutation%20observer%20config.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](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/tech%20config_common%20properties.png) - Select the **Mutation Observer Config for Smart Context** checkbox. ![tech config_enable mutation observer for smart context.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/tech%20config_enable%20mutation%20observer%20for%20smart%20context.png) User Actions - Click **User Action**. ![tech config_user action.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/tech%20config_user%20action.png) - Select the **Mutation Observer Config for User Action** checkbox. ![tech config_enable mutation observer for ua.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/tech%20config_enable%20mutation%20observer%20for%20ua.png) 1. Click **Add**. ![tech config_add button.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/tech%20config_add%20button.png) 2. In the **Config** dropdown, select what mutations you want to observe. ![image.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image%28122%29.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](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/tech%20config_save.png) ## Related - [Smart Context](/smart-context.md) - [Launcher](/launcher.md)