Adding Configurator to Your Page

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 id="epigraphConfigurator" client-access-key="access-key-provided-by-epigraph"></epigraph-configurator>

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;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
</style>

<div class="epigraph-solution-wrapper" id="epigraphConfiguratorContainer">
  <epigraph-configurator id="epigraphConfigurator" client-access-key="access-key-provided-by-epigraph">
  </epigraph-configurator>
</div>

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

const epgConfiguratorRef = document.getElementById("epigraphConfigurator");
epgConfiguratorRef.api.<someMethodFromTheApi>();

API documentation is available here:

https://docs.epigraph.dev//index.html