@jahuty/web v0.2.1

jahuty-web

This browser-based SDK provides convenient access to the Jahuty API from any HTML page.

Requirements

This library supports the last two major versions of major browsers. See the .browserlistrc for details.

Installation

Add the following deferred <script> tag to your document:

<script defer src="https://unpkg.com/@jahuty/web@0.2.1/dist/jahuty.js"></script>

Add a script to execute jahuty() after the resources and DOM have finished loading:

<script>
  document.addEventListener('DOMContentLoaded', function () {
    jahuty({ apiKey: 'YOUR_API_KEY' });
  });
</script>

Usage

Add a container for each snippet in your document using the HTML5 data-* attribute data-snippet-id:

<div data-snippet-id="YOUR_SNIPPET_ID"></div>

This will cause the innerHTML of any element with the data-snippet-id attribute to be replaced with its corresponding content:

<div data-snippet-id="YOUR_SNIPPET_ID">
  YOUR_SNIPPET_CONTENT
</div>

Rendering content

By default, Jahuty will render a snippet's published content, the content that existed the last time a teammate clicked the "Publish" button, to avoid exposing your creative process to customers.

You can render a snippet's latest content, the content that currently exists in the editor, in the current environment with the preferLatest configuration option:

<script>
  document.addEventListener('DOMContentLoaded', function () {
    jahuty({ apiKey: 'YOUR_API_KEY', preferLatest: true });
  });
</script>

You can also prefer the latest content (or not) for a single render with the data-snippet-latest attribute:

<div data-snippet-id="YOUR_SNIPPET_ID" data-snippet-latest="true"></div>

Using parameters

You can pass parameters into your snippet by passing a valid JSON string as the data-snippet-params attribute:

<div data-snippet-id="YOUR_SNIPPET_ID" data-snippet-params='{"foo":"bar"}'></div>

The parameters above would be equivalent to assigning the variables below in your snippet:

{% assign foo = "bar" %}

Tracking renders

You can record where snippets are rendered - the value of the window.location.href variable - using the data-snippet-location attribute:

<div data-snippet-id="YOUR_SNIPPET_ID" data-snippet-location="true"></div>

Caching for performance

At this time, this library does not support caching.

Handling errors

If Jahuty's API returns an error, an error will be output to the browser's console.

License

This library is licensed under the MIT license.