USAGE

To start using the web component. Import this script in the <head> tag of your page. Once imported, you should be able to mount it as a regular HTML tag in a container.

<script
	type="module"
	src="https://cdn.jsdelivr.net/npm/@epigraph/[email protected]"
></script>

<epigraph-configurator-lite id="epigraphConfiguratorLite" experience-id="experience-id-provided-by-epigraph"></epigraph-configurator-lite>

We recommend wrapping this web component in a container div that is controlled by you to achieve the desired width and height on the page.

Here is an example of how we set up this for testing internally.

<style>
  .epigraph-solution-wrapper {
    margin: 0;
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent;
  }
</style>

<div
    id="epigraphConfiguratorWrapper"
    class="epigraph-solution-wrapper"
>
    <epigraph-configurator-lite
        id="epigraphConfiguratorLite" 
        experience-id="experience-id-provided-by-epigraph"
    ></epigraph-configurator-lite>
</div>

To turn off the default UI:

<epigraph-configurator-lite
    id="epigraphConfiguratorLite" 
    experience-id="experience-id-provided-by-epigraph"
    disable-default-ui
></epigraph-configurator-lite>

Once setup, you can access the API that is exposed on this web component via the element's reference.

const epgConfiguratorLiteRef = document.getElementById("epigraphConfiguratorLite");
epgConfiguratorLiteRef.api.<someMethodFromTheApi>();

API documentation is available here:

Adding Configurator Lite to Your Page

USAGE

What’s Next