elfsquad/showroom-iframe

This package allows easy embedding of the Elfsquad showroom into websites 🌐

🏰 Elfsquad showroom iframe

A package that provides a simple way to embed the Elfsquad showroom in your website.

• 🛠 Installation
• 🖥️ Usage
  • 📸 Trigger a screenshot
  • 🔄 Reset the camera position
  • 🔳 Toggle the footprint visibility
  • 📣 Handle screenshot event
  • 📝 Handle quotation request event
• 🤝 Contributing
• ⚖️ License
• 🎉 Acknowledgements

🛠 Installation

npm install --save @elfsquad/showroom-iframe

<script type="importmap>
{
  "imports": {
    "@elfsquad/showroom-iframe": "https://cdn.skypack.dev/@elfsquad/[email protected]"
  }
}
</script>

🖥️ Usage

This package exposes the ElfsquadShowroom class. This class can be used for creating & communicating with the iframe.

Example:

import { ElfsquadShowroom } from "@elfsquad/showroom-iframe";
const container = document.createElement("div");
document.body.appendChild(container);

const elfsquad = new ElfsquadShowroom({
  container: container,
  url: "https://automotive.elfsquad.io/configure/Elfsquad%20carrosserie"
});

📸 Trigger a screenshot

elfsquad.screenshot();

🔄 Reset the camera position

elfsquad.home()

🔳 Toggle the footprint visibility

elfsquad.toggleFootprint();

📣 Handle screenshot event

import { ScreenshotCallback } from "@elfsquad/showroom-iframe";
const callback: ScreenshotCallback = ({image}) => {
    console.log('image: ', image);
}
elfsquad.onScreenshot(callback);

📝 Handle quotation request event

import { RequestQuoteCallback } from "@elfsquad/showroom-iframe";
const callback: RequestQuoteCallback = ({configurationId}) => {
    console.log('configurationId: ', configurationId);
}
elfsquad.onRequestQuote(callback);

🤝 Contributing

We welcome contributions! Please feel free to fork the repository, make your changes, and submit a pull request.

⚖️ License

Licensed under MIT. See the LICENSE file in the repository for full details.

🎉 Acknowledgements

A big thank you to everyone who contributes to the ongoing development and maintenance of this package.