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:

User Identification #

Apologist Beacon allows you to pass in a custom user ID to tie the user back to your system. Simply pass your identifier via the data-user parameter, and all prompts the user submits will be tagged with that identifier.

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 nearly 200 languages out of the box. See the full list of supported languages here.

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. See the full list of supported Bible translations here.

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.

Icon Color #

By default, the Beacon icon will be whatever color you set as the “Primary Color”. However, if you wish the icon to be a different color than your primary color in the chatbot, you may override this behavior using the data-icon-color parameter. Any valid CSS color value is supported.

Icon Image #

If you would like to replace the Beacon icon image with a custom image, you may override it via the data-icon-image parameter. URLs and data URIs are supported.

Icon Position #

Some website already have a floating icon in the lower right, or have some other obstruction that necessitates adjusting the position of the Beacon icon. In such cases, the Beacon icon position can be adjusted using the data-offset-x and data-offset-y parameters to control how far from the right and bottom edges of the screen the icon should be positioned, respectively. Any valid CSS measurement value is accepted for both offsets.

Other Icon Customizations #

If there are customizations you would like to make to the appearance of the Beacon icon that are not supported through the above options, you may also simply override the Beacon icon’s styles via CSS. The Beacon icon element has a class of apg-icon.

Full Example with All Options #

<script
    async
    id="apg-beacon"
    data-user="[custom user identifier]"
    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-translations=[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]"
    data-icon-color="[any valid CSS color]"
    data-icon-image="[any image URL or data URI]"
    data-offset-x="[any valid CSS measurement]"
    data-offset-y="[any valid CSS measurement]"
    src="https://[your domain]/beacon/agent.min.js"
></script>