Skip to content

QR Builder Guide

This guide covers Route Bible's QR Builder at https://route.bible/builder. For the full website badge embed guide, see Website Badge Guide.

What QR Builder does

  • Parses human-friendly or canonical passage input.
  • Generates canonical Route Bible links.
  • Renders QR previews in-browser.
  • Exports QR assets for church slides, print, and web pages.

Accepted input

Builder accepts common references and canonical forms, including:

  • John 3:16
  • John 3:16-18
  • JHN.3.16
  • JHN.3.16-JHN.4.2

Canonical output

Builder normalizes passages to canonical lowercase route slugs:

  • Input: John 3:16
  • Output URL: https://route.bible/jhn.3.16
  • Canonical link (https://route.bible/jhn.3.16) uses default resolver behavior.
  • Preview button opens launcher mode (?mode=launcher) to make chooser behavior explicit.

Downloads and embed outputs

Builder provides:

  • QR PNG download
  • QR SVG download
  • Canonical link copy target
  • Dynamic badge embed snippet
  • Badge SVG asset download

Default embed snippet:

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

For fixed-passage snippets and a detailed explanation of badge.js behavior, see Website Badge Guide.

Pre-filling Builder via URL

Builder supports passage prefill through query parameters.

Supported keys include:

  • resolve
  • q
  • query
  • passage
  • ref

Example:

https://route.bible/builder?resolve=JHN.3.16

Church media workflow

  1. Build passage in /builder.
  2. Keep canonical URL in slide notes.
  3. Use SVG for projection/print quality.
  4. Test scan on iOS and Android before service.

Visual walkthrough

  1. Start on Route Bible Builder.

Step 1: Route Bible Builder start screen

  1. Enter passage text and verify QR/canonical output.

Step 2: Builder output with generated QR

  1. Open Sermon QR Packs when you need batch processing.

Step 3: Sermon QR Packs sign-in screen

Developer integration workflow

  1. Canonicalize passage server-side or client-side.
  2. Link users to /builder?resolve=<canonical> for manual final checks.
  3. Store canonical route URL for durable references.
  4. Use /badge.js for lightweight embed integration.

QA checklist

  • Passage parses successfully.
  • Canonical link opens expected passage.
  • PNG and SVG exports are downloadable.
  • QR scan resolves on iOS and Android.
  • Embed snippet renders badge correctly on target site.