Skip to content

IFrames plugin

Jump to bottom
R.Brown edited this page Jan 4, 2021 · 11 revisions

License

IFrames plugin supports highlighting elements in the HTML IFrames.

Use Cases

  • Highlighting elements in IFrames
  • Support nested IFrames

Installation

Please refer to the plugins' installation and configuration Wiki page.

Note: CSS reference needs to be added to every IFrame being used in the guided tour.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/guidechimp@3/dist/plugins/iFrames.css">

Note: Commercial GuideChimp plugins require a valid customer account with the assigned plan and additional configuration, which will be used to validate the availability of particular GuideChimp functions or plugins for the given customer account.

How To Use

To highlight an element in an IFrame, you need to specify an array of the IFrame's parent elements (selectors or HTML elements). Multiple IFrames definitions need to be provided in the "nested" order.

<body>
    <iframe id="iframe1">
        <iframe id="iframe2">
            <iframe id="iframe3">
               <div id="first-step-element">First Step Element</div>
            </iframe>
        </iframe>
    </iframe>
</body>
GuideChimp.extend(guideChimpPluginIFrames);

var tour = [{
    element: '#first-step-element',
    iFrames: ['#iframe1', '#iframe2', '#iframes3'],
    title: 'First Step Element',
}];

var guide  = GuideChimp(tour);
guide.start();

Examples

Website | Documentation | Plugins | Examples | Labs64 NetLicensing

Clone this wiki locally