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:

Hide the Header #

If you wish to exclude the Apologist Beacon header, simply pass a value of true via the data-headless attribute. Note that hiding the header will remove the Apologist Beacon logo, the info modal, and the language switcher.

White Label 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.

Language #

Apologist Beacon currently supports 10 languages out of the box:

• English (en)
• Spanish (es)
• French (fr)
• German (de)
• Italian (it)
• Japanese (ja)
• Dutch (nl)
• Portuguese (pt)
• Russian (ru)
• Chinese (zh)

Use the data-lang 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 that other.

Corpus #

Apologist Beacon can be customized to use only specific context from Sources uploaded to Apologist Ignite in its responses. Use the data-corpus attribute to pass a corpus identifier, which represents a list of Ignite Source IDs. If this attribute is not specified, Agent will utilize its entire corpus by default.

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)
• 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)

Add a Contact Phone Number #

Apologist Beacon supports exposing a phone number for users to call or text if they would like to speak with a real human being. If values are passed via the data-phone and data-qr attributes, the corresponding QR code image and phone number will be displayed at the end of each of the chatbot’s responses.

Full Example with All Options #

<script
    async
    id="apg-beacon"
    data-lang="[en|es|fr|de|it|ja|nl|pt|ru|zh]"
    data-corpus="[corpus ID]"
    data-headless="[true|false]"
    data-color="[any valid CSS color]"
    data-translation="[esv|niv|kjv|net|nkjv|nlt|csb|nasb]"
    data-phone="[phone number]"
    data-qr="[QR code URL]"
    src="https://apologist.ai/beacon/agent.min.js"
></script>