Advanced Styling of your Embedded Agent

When you embed your Agent using these instructions, the embed-v2.js script adds a launch button to the bottom right of the page. Clicking the button slides your Agent in from the right edge of the page as a full-height drawer. The data-afm-embed- parameters cover the basics, and you can go further with your own CSS and Javascript as described below.

These instructions work only when you have full control of the HTML source for a page. For an Agent embedded using the IFRAME approach, consult your authoring platform documentation for available styling options.

How the styles are applied

The script adds the stylesheet https://app.answersfrom.me/seeker/embed.css to your page, ahead of your page's own stylesheets. Any rule you add for the classes below in a <style> tag or in your own CSS file takes precedence over it, as long as it is at least as specific.

Style the launch button

For example, to give the button a navy background, a bold label and squarer corners:

<head>
...
    <style>
        .afm-embed-button-v2 {
            background-color: #1f2a44 !important;
            font-weight: bold;
            border-radius: 8px;
        }
    </style>
</head>

The !important modifier is needed for the background color only, because the script sets it directly on the button to match the data-afm-embed-color parameter. The "a:" mark is white, so choose a background dark enough for it to show.

Use your own button

Instead of the launch button, you can open your Agent from any element on your page that can be clicked, such as a button or a link in your navigation.

Rather than embedding the DIV element as in the instructions, put id="afm-embedded-agent" and the data-afm-embed- parameters on your own element. It must not be a DIV. The script then adds no launch button of its own and leaves the appearance of your element alone. Clicking your element opens the drawer, and clicking it again closes it. For example:

<script src="https://app.answersfrom.me/seeker/embed-v2.js"></script>
<button type="button" id="afm-embedded-agent"
        data-afm-embed-hubId="YOUR_HUB_ID"
        data-afm-embed-title="Help Agent for MySite.com">Get an Answer
</button>

Open or close your Agent from your own code

Your Agent's own collapse button closes the drawer. To close it from another element on your page, for example a link that takes the visitor somewhere else on the page, remove the drawer's open class:

const drawer = document.querySelector(".afm-embed-drawer");
if (drawer) {
    drawer.classList.remove("open");
    drawer.setAttribute("aria-hidden", "true");
}

The drawer is created the first time a visitor opens your Agent, so to open it from your own code, click the launch button (or your own button) for the visitor. Check first that the drawer isn't already open, since a click on an open drawer's button closes it:

const drawer = document.querySelector(".afm-embed-drawer");
if (!drawer || !drawer.classList.contains("open")) {
    const launcher = document.querySelector(".afm-embed-button-v2")
        || document.getElementById("afm-embedded-agent");
    launcher.click();
}

To open your Agent as soon as the page loads, add data-afm-embed-autoLaunch="true" to the embed code instead.

Change the position and size

The launch button sits 24px from the bottom right corner of the page, and the drawer is 450px wide (80% of the page when your visitor widens it). To move the button to the bottom left:

<style>
    .afm-embed-button-v2 {
        left: 24px;
        right: auto;
    }
</style>

To slide the drawer in from the left and make it wider:

<style>
    @media (min-width: 641px) {
        .afm-embed-drawer {
            left: 0;
            right: auto;
            width: 600px;
            border-left: 0;
            border-right: 1px solid #c3c7cd;
            box-shadow: 4px 0 16px rgba(0, 0, 0, 0.15);
            transform: translateX(-100%);
        }
    }
</style>

On screens 640px wide or narrower, such as phones, the drawer always fills the whole screen. Keeping your drawer overrides inside @media (min-width: 641px), as above, leaves that behavior in place.

Show your Agent beside your page

To show your Agent all the time as a pane beside your page, rather than behind a button, add data-afm-embed-alwaysOn="true" to the embed code. The script moves your page's content into a column on the left and puts your Agent in a 450px pane (CSS class afm-embed-pane) on the right. On phones the pane covers the page. Since this changes the layout of the whole page, preview it carefully before you publish.