Skip to main content

@elfsquad/showroom-iframe

ElfsquadShowroom

The ElfsquadShowroom class is the main entry point for the elfsquad/showroom-iframe library. It provides methods to embed & communicate with the Elfsquad showroom.

constructor(options)

Initializes a new instance of the Elfsquad Showroom.

Method parameters

options required (ElfsquadShowroomOptions)

The options used to initialize the showroom.

const showroom = new ElfsquadShowroom({ container: '#showroom', url: 'https://automotive.elfsquad.io' });

getNativeElement()

Retrieves the native iframe element.

Returns (HTMLIFrameElement)

The native iframe element.

const showroom = new ElfsquadShowroom({ container: '#showroom', url: 'https://automotive.elfsquad.io' });
const iframe = showroom.getNativeElement();

home()

Resets the viewer to the home camera position.

const showroom = new ElfsquadShowroom({ container: '#showroom', url: 'https://automotive.elfsquad.io' });
showroom.home();

toggleFootprint()

Toggles the visibility of the footprint.

const showroom = new ElfsquadShowroom({ container: '#showroom', url: 'https://automotive.elfsquad.io' });
showroom.toggleFootprint();

changeLanguage(languageIso)

Change the language of the showroom & configuration to the specified language ISO code.

Method parameters

languageIso required (string)

The ISO code of the language to change to.

const showroom = new ElfsquadShowroom({ container: '#showroom', url: 'https://automotive.elfsquad.io' });
showroom.changeLanguage('en');

screenshot()

Initiates a screenshot of the current view. The screenshot data is returned via the `onScreenshot` callback.

const showroom = new ElfsquadShowroom({ container: '#showroom', url: 'https://automotive.elfsquad.io' });
showroom.screenshot();

onScreenshot(callback)

Registers a callback function to be invoked when a screenshot is taken.

Method parameters

callback required (ScreenshotCallback)

The callback function to be called upon screenshot capture.

const showroom = new ElfsquadShowroom({ container: '#showroom', url: 'https://automotive.elfsquad.io' });
showroom.onScreenshot(data => {
 console.log(data.image);
});

onRequestQuote(callback)

Registers a callback function to be invoked when a quote is requested.

Method parameters

callback required (RequestQuoteCallback)

The callback function to be called upon quote request.

const showroom = new ElfsquadShowroom({ container: '#showroom', url: 'https://automotive.elfsquad.io' });
showroom.onRequestQuote(data => {
 console.log(data.configurationId);
});

enableConfigurationUpdates()

Enables receiving real-time configuration updates, whenever the configuration is changed in the showroom.

const showroom = new ElfsquadShowroom({ container: '#showroom', url: 'https://automotive.elfsquad.io' });
showroom.enableConfigurationUpdates();
showroom.onConfigurationUpdate(data => {
   console.log('updated configuration:', data);
});

disableConfigurationUpdates()

Disables receiving real-time configuration updates.

const showroom = new ElfsquadShowroom({ container: '#showroom', url: 'https://automotive.elfsquad.io' });
showroom.disableConfigurationUpdates();

onConfigurationUpdate(callback)

Registers a callback function to be invoked when the configuration is updated.

Method parameters

callback required (ConfigurationUpdateCallback)

The callback function to be called upon configuration update.

const showroom = new ElfsquadShowroom({ container: '#showroom', url: 'https://automotive.elfsquad.io' });
showroom.enableConfigurationUpdates();
showroom.onConfigurationUpdate(data => {
   console.log('updated configuration:', data);
});

navigateTo(url)

Navigates to the specified URL within the showroom iframe.

Method parameters

url required (string)

The URL to navigate to within the showroom iframe.

const showroom = new ElfsquadShowroom({ container: '#showroom', url: 'https://automotive.elfsquad.io' });
showroom.navigateTo('products');
showroom.navigateTo('configure/featureModelName');
showroom.navigateTo('checkout');