Build

An animated character that follows the pointer and changes expression with what the visitor does.

Mascot gives your site a small character with a face: a chatbot’s avatar, a guide beside a form, a personality in a hero. Its eyes follow the pointer, it blinks and floats on its own, and it reacts when something happens — thinking while a form sends, pleased when it has gone, bored by an empty one, asleep when nobody is around. It can also talk, wave, say a few words in a bubble and float in a corner as a chat launcher.

You choose its body and eyes, decide what it can look like, and write simple rules for when it looks that way. No code is needed, and it works straight away on the default settings. If you do write code, see For developers.

Quick start #

1. Add the widgetSearch for Mascot in the Elementor panel and drag it onto the page.
2. Pick a bodyUnder Character, click one of the shape tiles. The face moves to suit it.
3. Set its colours and sizeUnder Style → Mascot.
4. Try itOpen the page or Elementor’s Preview. Move the pointer, click the mascot four times, then leave the pointer still for five seconds.

Body and eyes #

Body offers 26 ready-made shapes, from the Ghost to a Chat bubble, a Cloud and a Star. Each one comes with a face position that suits it, so you can switch freely.

Using your own SVG

Bodies, eyes and mouths can all be your own artwork. A few rules decide how well a drawing animates:

An SVG that cannot be read is not shown. A custom body falls back to the bundled one; an expression is left out, along with any trigger that points at it.

Expressions #

The Expressions list is everything the mascot can look like. Change a row to restyle an expression, or add a row to create a new one. Each row has:

Out of the box, Normal, Focus, Confuse, Thinking and Shy blink. Happy hops, Upset shakes its head, steams and turns orange and red, and Sleepy shows Floating Zzz. Thinking shows a thought bubble, Shy covers its eyes, and Hello waves.

A row saved before these settings existed keeps working as it was, including one with the old Floating Zzz switch on.

Triggers #

Each row says: Show this expression When this is true. The top row whose condition is true wins, so drag the rows to set the priority, and keep Otherwise (Default) last.

Element and Field are CSS selectors, such as #contact or .my-class. To give something an ID, select it and set CSS ID in its Advanced tab.

Every row can also say something. A new mascot starts with these rows, so it reacts to a form and greets the visitor with nothing to set up:

Holding an expression

There are two ways, and they do different jobs:

Linking it to your page #

A contact form

Form results work with Contact Form 7, the NovaKit Newsletter form and NovaKit Custom forms. Accounts forms are not covered. Form Invalid also fires when a browser refuses an empty Required field. See Forms for setting these up. On a mascot added before these became the defaults, add these rows above the Default row:

With two forms on a page, put a selector for the one you mean in Element. Left empty, a form row listens to every form.

A chat box with a Send button

For a real chat box, follow Connect a chatbot. For a Send button of your own that is not a NovaKit Form: one button can do two different things. Order matters here: the first row that accepts the click takes it, so the empty case goes on top. Say the field’s ID is message and the button’s is send:

Several on one page

Add as many as you need. Each has its own body, expressions and rules, and they do not interfere with each other. A mascot scrolled out of view stops moving until it returns.

Mouth and talking #

Turn on Show Mouth under Character. Every expression then picks a mouth that matches its eyes, and you can change any of them on its row. The mouth rides the same head as the eyes and morphs between shapes.

It talks while a speech bubble’s words appear, on any expression with Talks on, and when code asks it to. Each mouth talks in character: a smile opens into an open smile, a frown into an open frown, and Bored just mumbles. The Sleepy mouth snores: it swells and shrinks slowly for as long as it shows. Draw your own mouths like the eyes: filled shapes on a 120 by 50 artboard.

A Say bubble moves the mouth too, unless Talk While Speaking is off — either the general one here, or an expression row’s own override. The mouth then stays as it is while the bubble shows its words.

Hands #

Two floating hands with no arms, so they suit every body and sit against its own outline. Each expression picks a pose under Hands:

Hands Colour is under Style → Mascot. Left empty, it is a tint between the Body and Eyes Colours, which reads against the page and in front of the body.

Effects #

Effect on an expression row floats something around the head for as long as that expression shows, then clears it away:

Style → Floating Effects has Position X and Y, as a percentage of the body and set per device, and a Colour with a dark mode value. Left empty, effects use the Body Colour.

Speech bubble #

Type in Say on any Trigger row and the words appear in a bubble as that row starts, with the mouth moving. Put several lines and choose their Order: Random (the default) never repeats the same line twice running; In Order goes through them one by one and starts again at the top. Turn on Say Once for a greeting that should not repeat on the same page view. A bubble stays long enough to read, then leaves by itself.

Its look is under Style → Speech Bubble: which side it sits on, Max Width, Typography, colours with dark mode values, Padding, Corner Radius and Box Shadow. Preview In Editor shows a sample to style by. If the chosen side would run off the screen, it moves to one that fits.

Right-to-left languages work by themselves. Each message sets its own direction from its first letters, so Arabic or Hebrew reads right to left even on a left-to-right site, and English reads left to right on a right-to-left one. There is nothing to set, and one row can mix languages across its lines. Choose a font with those letters under Typography if your site’s font lacks them.

Link and floating launcher #

Link And Position turns the mascot into something to click.

It floats on the live page and in Preview. In the editor it stays in place so you can select it. To show it on every page, put it in a footer Global Block.

Open a popup from it

1. Build the popupA Popup Global Block holding your chat form. Check that its Display Conditions include this page. With none set, it is on every page.
2. Set the LinkUnder Link And Position, press the dynamic tags icon on Link and choose NovaKit Trigger Link.
3. Point it at the popupSet Action to Open, Target Type to Popup, then pick yours under Popup.
4. Name itSet Accessible Name under Character, such as “Open chat”.

On a phone

There is no separate setup. It works by touch, and a bubble that would run off the screen moves to fit. These are worth setting with Elementor’s phone view selected:

To leave a mascot off phones altogether, use Advanced → Responsive.

Motion and style #

The defaults under Motion are tuned to feel calm, so change them one at a time.

Style → Mascot has Size (124px by default), Alignment, Body Colour and Eyes Colour, each colour with a dark mode value.

Accessibility and devices #

For developers #

To connect a chatbot, start with Connect a chatbot, which needs less code than this. The panel covers anything a selector can reach. For everything else — a reply arriving, a game score — there is an event and a set of CSS hooks. Add the code the way you add any other: see Custom CSS and JS.

Driving it from JavaScript

Dispatch nk:mascot on document:

document.dispatchEvent( new CustomEvent( 'nk:mascot', { detail: {
    expression: 'happy',  // A row's name as a slug. null lets the Triggers run again.
    hold: 3,              // Seconds, or true for until told otherwise. Default 2.5.
    mascot: 'helper',     // Optional Mascot ID. Without it, every mascot on the page.
    say: 'On it!',        // Words in the bubble. hold applies. null takes them away.
    talk: true,            // The mouth moves: true, false, or seconds.
} } ) );

For example, a mascot that waits on a reply from something that is not a NovaKit Form:

const mascot = ( expression, hold ) => document.dispatchEvent(
    new CustomEvent( 'nk:mascot', { detail: { expression, hold, mascot: 'helper' } } )
);

mascot( 'focus', true );          // Stay on Focus while the reply is on its way.

fetch( '/my-chat-endpoint' )
    .then( () => mascot( 'happy', 3 ) )
    .catch( () => mascot( 'sad', 3 ) );

Reporting your own form’s result

A form that NovaKit does not know about can still fire the Form rows. Dispatch one of these from the form element, with bubbles: true so the mascot hears it and the row’s Element can match:

form.dispatchEvent( new CustomEvent( 'nk-form:submit', { bubbles: true } ) );  // Form Sending starts
form.dispatchEvent( new CustomEvent( 'nk-form:success', { bubbles: true } ) ); // Form Sent
form.dispatchEvent( new CustomEvent( 'nk-form:error', { bubbles: true } ) );   // Form Failed
form.dispatchEvent( new CustomEvent( 'nk-form:invalid', { bubbles: true } ) ); // Form Invalid
form.dispatchEvent( new CustomEvent( 'nk-form:done', { bubbles: true } ) );    // Form Sending ends

Contact Form 7’s own events are already heard: wpcf7beforesubmit starts Form Sending and wpcf7submit ends it, wpcf7mailsent counts as Form Sent, wpcf7invalid as Form Invalid, and wpcf7mailfailed and wpcf7spam as Form Failed.

Styling it from CSS

The current expression is always on the root element as data-nk-mascot-state, so CSS or a script can respond to it. These custom properties drive the look:

/* Pink eyes while it is upset. */
.nk-mascot[data-nk-mascot-state="upset"] {
    --nk-mascot-eyes: #ffc2d1 !important;
}