Selah Tools Docs

Appearance

Open

Website Badge Guide ​

This guide shows how to add the Route Bible website badge to your site and explains exactly what https://route.bible/badge.js does at runtime.

Quick start (copy/paste) ​

Paste this where you want the badge to render:

html
<div id="route-bible-badge"></div>
<script async src="https://route.bible/badge.js" data-mount="#route-bible-badge"></script>

How to use it on your site ​

  1. Pick a location on your page (article footer, sermon page sidebar, resource card, etc).
  2. Add a container element (for example div#route-bible-badge).
  3. Add the badge.js script tag with data-mount pointing to that container.
  4. Publish and verify the badge renders and opens Route Bible when clicked.

If your CMS supports raw HTML blocks, paste the same snippet into that block.

Fixed-passage badge (optional) ​

Use data-passage to force the badge to always open one passage:

html
<div id="route-bible-badge"></div>
<script
  async
  src="https://route.bible/badge.js"
  data-mount="#route-bible-badge"
  data-passage="JHN.3.16"
  data-src="church-site"
></script>

Use canonical passage format (JHN.3.16, ROM.8.28-30, etc). The script lowercases and URL-encodes the value before building the route URL.

Supported attributes ​

  • data-mount: CSS selector for where the badge should render.
  • data-passage: fixed passage route target. If omitted, share-aware mode is used.
  • data-src: source tag appended as src query param for fixed-passage mode.
  • data-target: link target (_blank by default, or _self if you want same-tab navigation).

How badge.js works ​

  1. Reads the script URL and uses that origin (normally https://route.bible) for all generated URLs.
  2. Chooses destination URL:
    • With data-passage: routes to /<passage>?mode=launcher (plus src if provided).
    • Without data-passage: routes to /share-target with the current page URL, page title, and meta description text (up to 512 chars).
  3. Chooses render mount:
    • first tries data-mount
    • if missing/unresolved, falls back to script parent element (unless parent is <head>)
    • then falls back to document.body
  4. Injects an anchor + badge image (/route-bible-badge.svg) into the mount.
  5. Prevents duplicate renders in the same mount by marking it with data-route-bible-badge-rendered="true".

Expected click behavior ​

  • Default mode (no data-passage): Route Bible attempts to extract passage context from page metadata via /share-target, then redirects to canonical route flow.
  • Fixed mode (data-passage): Route Bible opens that specific passage directly in launcher mode.

From there, users continue through normal Route Bible resolver behavior (app/deep-link when possible, with launcher and web fallback paths).

Troubleshooting ​

  • Badge not visible:
    • confirm data-mount matches an existing element.
    • confirm your site allows external script tags.
  • Badge appears in an unexpected location:
    • your mount selector may not match; script then falls back to parent/body.
  • Opens in a new tab but you want same tab:
    • add data-target="_self".
  • Fixed passage does not route as expected:
    • use canonical passage format in data-passage (for example JHN.3.16).