Guides

Installation

Suggest Edits

Basic Javascript

If you have a web app with multiple pages where each one triggers a new page refresh then you will most likely need the basic JavaScript method. This means you will not need to create separate actions which trigger when the Portal will appear or update. The page refresh itself is enough to trigger the action. To set up the basic JavaScript, you will only need to follow two steps.

How to Install

To get the Portal to appear on your web app simply copy and paste the snippets below on every page where you want the Portal to appear for website visitors. We recommend to add them to a single page with the url /portal and have all urls in /portal/* resolve this page.

1) Add tag for where to inline embed the portal

The snippet below should be added where you want the Portal to be inline embedded on your site. This is usually within your <body> tag.

<div id="wastehero-portal-div" style="height: calc(100vh); position: relative;">
  <!-- Wastehero portal will be embedded here -->
</div>

2) Add tag for where to inline embed the portal

The last snippet should be added at the end of your <body> tag.

<script>
  window.WH_SS_INIT_ROUTE = '/portal';
  window.WH_SS_PORTAL_DOMAIN = '{ INSERT PORTAL HOSTNAME }';
  window.WH_SS_ROOT_ELEMENT_ID = `wastehero-portal-div`;
</script>
<script
  id="wh-portal-init"
  src="https://embed.wastehero.io/wastehero-portal-cdn.js"
></script>

📘

WH_SS_PORTAL_DOMAIN

This setting must be set to the same portal hostname as you have configured inside WasteHero under company settings.

📘

WH_SS_INIT_ROUTE

This setting must be the url path of the root location on your site where you embed the Portal.

Updated almost 2 years ago