Epigraph-Viewer

Indeed... Here it is:

• --color-brand-base
• --color-brand-base-secondary
• --color-brand-base-tertiary
• --color-brand-accent
• --color-brand-accent-secondary
• --color-brand-accent-tertiary
• --color-brand-light
• --color-brand-dark
• --font-brand-heading
• --font-brand-body
• --unit-brand-radius

There might be cases where you wish to make the background blend better with your website and making the viewer transparent to show what's behind could be one of the ways to achieve that. In order to do so, you just need to add the attribute "transparent-background" to the epigraph solution.

<epigraph-viewer
  id="demoViewer"
  sku="sku-epigraph-logo-default"
  transparent-background
>
</epigraph-viewer>

To customize the view in your space action button, you have 2 options depending on your use case:

1. Custom button anywhere on the page:

In order to have a custom or an existing button on your web page, you can utilize the API exposed on our solutions.

// Assuming you used the id="epigraphViewer01"
const epigraphViewerElement = document.querySelector("#epigraphViewer01")
const myCustomButton = document.querySelector("#myCustomButton")

myCustomButton.addEventListener(
  "click", 
  () => {
    // This will either display a QR modal that can be scanned from an AR compatible device is the current device lacks the ability to do so OR show a modal requesting the user's permission to launch an AR session and gaining access to the camera (for current session only).
    epigraphViewerrElement.launchAR();
  }
);

2. Custom button within the epigraph solution:

In order to put a custom view in your space within the epigraph-viewer solution. You can utilize the web component slots, which work no differently than the regular HTML with the exception of mentioning which slot you wish to target by using a "slot" attribute:

<style>
  .custom-button {
    width: 150px;
    height: 50px;
    border-radius: 10px;
    background-color: rgba(255, 167, 167, 1);
    transition: 0.25s;
  }

  .custom-button:hover {
    background-color: rgba(189, 93, 93, 1);
    color: white;
    cursor: pointer;
  }
</style>

<epigraph-viewer
  id="epigraphViewerr01"
  class="demo-viewer"
  sku="sku-epigraph-logo-red"
>
  <button slot="slot-custom-view-in-your-space-button" class="custom-button">Custom Button</button>
</epigraph-viewer>

In this case we target the slot named: "slot-custom-view-in-your-space-button". By default this slot is empty and doesn't display anything unless something is provided using the steps above.

There might be instances where you might want to customize the CSS styling of the components within our solutions. In order to do so, we provide a functionality to define a custom <template> element on the page with the id set to "epigraphCustomStyles" (VERY IMPORTANT). Now whatever CSS class class of selector you target from in here should pick up the style overrides at runtime. The only things to remember is that certain properties might be enforced internally and you may need to use the "!important" successor on these property values to override the internal values.

IMPORTANT: Please ensure that this template is appended to the page before you r add any of our solutions to the page in order for them pick up the overrides

  <template id="epigraphCustomStyles">
      <style>
          .collapse-expand-button {
              background-color: green !important;
          }

          .hotspot-main {
              background-color: rgb(208 230 197 / 90%) !important;
          }
      </style>
  </template>

The Viewer and Tour expose the ability to set Contact Shadows via two settings. The Shadow Intensity and Shadow Softness. Both of these values accept input between 0 and infinity and can be set via API or attribute.

 <epigraph-viewer shadow-intensity="1" shadow-softness="4"/>

Or you can update via any of the three exposed API methods:

<epigraph-viewer id="epgViewer"/>
<script>
  let epgViewer = document.querySelected("#epgViewer");


  epgViewer.api.setShadowIntensity(1); //Intensity
  epgViewer.api.setShadowSoftness(4); //Intensity

  </script>