Overview

Apologist Beacon is a compact version of Apologist Agent that can be customized and embedded on any website. Churches, Christian ministries, or any webmaster that wants wishes to enhance their website or web app with the power of Agent can simply add an HTML snippet to surface Beacon to their users. Click on the Beacon icon floating on the lower right of this page to see a live demo!

For more information about the features of Apologist Agent itself, check out the Apologist Agent Overview.

How to Embed Beacon on Your Website #

Adding Apologist Beacon to your website is easy. Paste this HTML snippet before the end of your page’s </body> tag:

<script async id="apg-beacon" src="https://apologist.ai/beacon/agent.min.js"></script>

That’s it! You should see the Beacon icon floating in the lower right of your web page where you added the above snippet. If you wish to customize how Beacon is displayed, read on.

Configuration Options #

Build a Custom Beacon

Apologist Beacon supports the following options, all of which can be passed via the snippet as data attributes on the <script> tag:

Theme #

Apologist Beacon supports both light and dark themes via the data-theme attribute. It defaults to dark, but you can pass in a value of “light” to change it.

Primary Color #

You may pass in a custom primary color to Apologist Beacon by using the data-color attribute. Any valid CSS color value is supported. e.g., “#990000”.

Language #

Apologist Beacon currently supports 28 languages out of the box:

• Arabic (ar)
• Bangla (bn)
• Burmese (my)
• Chinese (zh)
• Czech (cs)
• Dutch (nl)
• English (en)
• Filipino (Tagalog) (tl)
• French (fr)
• German (de)
• Hebrew (he)
• Hindi (hi)
• Indonesian (id)
• Italian (it)
• Japanese (ja)
• Khmer (km)
• Korean (ko)
• Malay (ms)
• Lao (lo)
• Polish (pl)
• Portuguese (pt)
• Russian (ru)
• Spanish (es)
• Persian / Farsi (fa)
• Thai (th)
• Turkish (tr)
• Urdu (ur)
• Vietnamese (vi)

Use the data-language attribute to pass in a language code (e.g., es for Spanish). If no language is specified, Apologist Beacon will default to English. Note that due to limitations of the underlying Large Language Model (LLM) that powers Apologist Agent, some languages may yield better results than others.

You may also pass a data-languages attribute as a comma-delimited list to specify which languages users may switch to, and in which order. e.g., data-languages="en,es,zh".

Bible Translation #

The data-translation attribute instructs Agent to reference a specific Bible translation. English Standard Version will be used by default. Pass in the translation’s abbreviation in lower case.

• English Standard Version (esv)
• New International Version (niv)
• Berean Study Bible (bsb)
• King James Version (kjv)
• New English Translation (net)
• New King James Version (nkjv)
• New Living Translation (nlt)
• Christian Standard Bible (csb)
• New American Standard Bible (nasb)

In addition, you may pass a comma-delimited list of translation abbreviations via the data-translations attribute to control which translations will be available for users to select, and in which order. e.g., data-translations="esv,bsb,nasb".

Intro Screen Messaging #

The intro screen messaging is controlled by 3 attributes:

• data-preamble is the medium text above the large, colored headline. Default: “Be curious. Be humble.”
• data-headline is the large colored text in between the headline and the description. Default: “Learn boldly.”
• data-description is the small text below the large, colored headline. Default: “Ask anything about God, Jesus, or the Bible. This is AI for seekers of spiritual truth.”

If your Beacon supports multiple languages, you may add a valid JSON object for each of these attributes with language code keys. For example:

data-headline='{
"en": "My headline",
"zh": "我的标题"
}'

Scrolling Behavior #

By default, Beacon will automatically scroll as the response is being output. However, you may change this behavior by adding data-autoscroll="false" to the script tag.

Full Example with All Options #

<script
    async
    id="apg-beacon"
    data-language="[ar|bn|cs|de|en|es|fa|fr|he|hi|id|it|ja|km|ko|lo|ms|my|nl|pl|pt|ru|th|tl|tr|ur|vi|zh]"
    data-languages=[comma-delimited list of language codes]"
    data-translation="[esv|niv|bsb|kjv|net|nkjv|nlt|csb|nasb]"
    data-languages=[comma-delimited list of translation abbreviations]"
    data-theme="[light|dark]"
    data-color="[any valid CSS color]"
    data-preamble="[your preamble text or JSON object]"
    data-headline="[your headline text or JSON object]"
    data-description="[your description text or JSON object]"
    data-autoscroll="[true|false]"
    src="https://apologist.ai/beacon/agent.min.js"
></script>