# SupportMarker

*Category:* Components
*Section:* Misc
*Source:* https://uikit.developers.rio.cloud/#/components/supportMarker
*Captured:* 2026-04-27T14:58:31.806Z

You can add the support-marker class along with the data-support attribute to any HTML element - even divs wrapping around iframes, for example!

## SupportMarker

By default, support markers are invisible. Adding the show-support-marker class to the html tag will cause all support markers to show up.

You can use the utility functions provided by the UIKIT for easily adding / removing that class. Either simply toggle support markers on and off with toggleSupportMarker, or manage the state whether to show support markers manually and use enableSupportMarker.

### Example: Example 1

Toggle Support Markers Lorem Ipsum
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

#### React (tsx)

```tsx
import ExpanderPanel from '@rio-cloud/rio-uikit/ExpanderPanel';
import { toggleSupportMarker } from '@rio-cloud/rio-uikit/SupportMarker';
import Button from '@rio-cloud/rio-uikit/Button';

export default () => {
    const iFrameSrc = 'https://uikit.developers.rio.cloud/#start/intro';
    const iframeSupportData = `Widget: The Widget Name\nTeam: The Team Name \nSRC: ${iFrameSrc}`;

    return (
        <div className='space-y-25'>
            <Button onClick={toggleSupportMarker}>Toggle Support Markers</Button>

            <div className='support-marker' data-support='LoremIpsum component'>
                <ExpanderPanel title='Lorem Ipsum' bsStyle='default' open>
                    <div>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor et dolore
                        magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et. Stet
                        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
                    </div>
                </ExpanderPanel>
            </div>

            <div className='support-marker' data-support={iframeSupportData}>
                <iframe className='unstyled' width='100%' height='500' src={iFrameSrc} />
            </div>
        </div>
    );
};
```

### Example: Example 2

Show support markers

Lorem Ipsum
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

#### React (tsx)

```tsx
import { useEffect, useState } from 'react';

import ExpanderPanel from '@rio-cloud/rio-uikit/ExpanderPanel';
import Switch from '@rio-cloud/rio-uikit/Switch';
import { enableSupportMarker } from '@rio-cloud/rio-uikit/SupportMarker';

export default () => {
    // you could, for example, populate this state from localStorage at startup
    const [showSupportMarker, setShowSupportMarker] = useState(false);

    useEffect(() => {
        enableSupportMarker(showSupportMarker);
    }, [showSupportMarker]);

    const iFrameSrc = 'https://uikit.developers.rio.cloud/#start/intro';
    const iframeSupportData = `Widget: The Widget Name\nTeam: The Team Name \nSRC: ${iFrameSrc}`;

    return (
        <div className='space-y-25'>
            <Switch onChange={setShowSupportMarker} checked={showSupportMarker} labelPosition='right'>
                <div>Show support markers</div>
            </Switch>

            <div className='support-marker' data-support='LoremIpsum component'>
                <ExpanderPanel title='Lorem Ipsum' bsStyle='default' open>
                    <div>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor et dolore
                        magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et. Stet
                        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
                    </div>
                </ExpanderPanel>
            </div>

            <div className='support-marker' data-support={iframeSupportData}>
                <iframe className='unstyled' width='100%' height='500' src={iFrameSrc} />
            </div>
        </div>
    );
};
```