Skip to content

Home

Jump to bottom
Ahmed Abbas edited this page Jul 13, 2025 · 7 revisions

Getting Started

  1. First, you need to configure your App API Key at the <head> tag:
<script>
  window.oggeh = window.oggeh || {
    api_key: "YOUR_OGGEH_APP_API_KEY", // Required
    // api_secret: "YOUR_OGGEH_APP_API_SECRET", // Use only in mobile/desktop/nodejs apps
    // sandbox_key: "YOUR_OGGEH_APP_SANDBOX_KEY", // Use only in a development environment
    // domain: "YOUR_OGGEH_HOSTNAME", // Use only in mobile/desktop/nodejs apps
  };
</script>
  1. Next, you need to install our web component after the above script, also at the <head> tag:
<script src="https://unpkg.com/@oggeh/web-component/dist/oggeh.min.js"></script>
  1. Finally, use the custom element for loading your dynamic content anywhere at the <body> tag (see Templates).

Supported Properties

  1. config: Accepts one of the following values:
Value Required Propetries Description Example
anti-flicker Hides page until all content is loaded <oggeh-content config="anti-flicket"></oggeh-content>
router Enforcing history state (SPA mode) <oggeh-content config="router"></oggeh-content>
scripts type="text/oggeh-defer" Defer template javascript after loading all content <oggeh-content config="scripts"></oggeh-content>
  1. get (required): Accepts one of the following values:
Value Required Propetries Optional Propetries Example
app render (options: meta, nav, slider, locations, contact, social ) <oggeh-content get="app" render="nav"></oggeh-content>
model start-key <oggeh-content get="mode" start-key=""></oggeh-content>
pages start-key <oggeh-content get="pages" start-key="" limit=""></oggeh-content>
page key, scope (options: subject, header, ..., childs) <oggeh-content get="page" key=""></oggeh-content>
page-related key, model (options: *, product, event, or a custom model key) <oggeh-content get="page-related" key="" model=""></oggeh-content>
search-results keyword <oggeh-content get="search-results" keyword=""></oggeh-content>
news start-date, limit <oggeh-content get="news" start-date="" limit="4"></oggeh-content>
news-article timestamp, scope (options: subject, header, ..., childs) <oggeh-content get="news-article" timestamp=""></oggeh-content>
news-related timestamp, limit <oggeh-content get="news-related" timestamp=""></oggeh-content>
  1. custom: Accepts a custom method defined at the global oggeh object (see Custom Methods).

Supported Events

Event Description Example
oggeh.ready Triggers when a single tag is done with loading content document.addEventListener('oggeh.ready', console.log)
oggeh.navigate Triggers when history state changes (SPA mode) document.addEventListener('oggeh.navigate', console.log)
oggeh.error Triggers when a single tag fails to load content document.addEventListener('oggeh.error', console.log)

Additioan Features

  1. Router
  2. Scripts
  3. Anti-Flicker

API Documentation

See API Reference for additional details on available values for select attribute on each API Method.

Copyrights © 2012-2025 All Rights Reserved by OGGEH, Inc.

  1. Getting Started
  2. Templates

Clone this wiki locally