Epigraph-Tour

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

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="epigraphTour01"
const epigraphTourElement = document.querySelector("#epigraphTour01")
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).
    epigraphTourElement.launchAR();
  }
);

2. Custom button within the epigraph solution:

In order to put a custom view in your space within the epigraph-tour 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-tour
  id="epigraphTour01"
  class="demo-tour"
  sku="sku-epigraph-logo-red"
>
  <button slot="slot-custom-view-in-your-space-button" class="custom-button">Custom Button</button>
</epigraph-tour>

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 cases where you wish to make the background blend better with your website and making the tour 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-tour
  id="demoTour"
  sku="sku-epigraph-logo-default"
  transparent-background
>
</epigraph-tour>

In order to direct more attention towards the highlighted features of your product, <epigraph-tour> displays the hotspots by default in the scene, on startup. In order to not have this behaviour and not show hotspots on startup, you can add the attribute 'hide-hotspots-on-start'

<epigraph-tour
  id="demoTour"
  sku="sku-epigraph-logo-red"
  hide-hotspots-on-start
></epigraph-tour>

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>