Drop-in chat plugin (1-to-1)

The full Meet & Engage plugin API is designed to provide a deep integration with the site on which it is implemented, both in terms of look and feel functionality. Consequently some developer effort is required to implement.

Where this is not appropriate, we offer a more genericised one-to-one focussed plugin which can be included in a webpage as a simple code snippet.

Generic code snippet

The following can be copy and pasted onto pages throughout your site. It will create a hovering chat window in the bottom right corner of the screen when chat events are active. Copy the following, changing meetandengageaccountname to your live M&E account.

<script type="text/javascript" src="https://meetandengage.com/api/1.0/plugin.js"></script>
<script type="text/javascript">
    meetandengage_plugin({
        account: "meetandengageaccountname"
    });
</script>

Features

The plugin provides the following:

A floating chat window on the screen using the core M&E chat functionality for one-to-one events.
Adjust the copy shown on the event picker window prior to joining an event to suit your 'welcome' message.
Chat reopens automatically when the user browses to another page on your website, allowing them to continue the conversation.
Chat history is retained between chat sessions (within a recurring event).

Limitations and Dependencies

Chat events must be one-to-one
Events must be configured to use nickname or nickname-and-email credentials
oAuth logon options are not supported

Optional Features

The following can be implemented as required:

Limiting the choice of event to join, picking an event to join from the current live events automatically.
Letting the user join the chat without asking for their name/email if already known by calling programmaticLogon(): Typically this is used later in the candidate journey such as during an application process or as part of onboarding, where the site to which it is being embedded has user information to hand.
Sending contextual data about the user or the current page.

Picking an event automatically

The M&E platform allows for multiple events to be running concurrently and potentially at different times, e.g. 'General Enquiries - 9am - 5pm', 'Application Form Support - 8am - 8pm', 'Post-offer Questions - 10am - 2pm', and so on. When embedding the simple plugin into a particular page, you can prevent all currently open events from being listed by using the pickEventAutomatically option. This takes a regular expression (as a string - without the start and finish slashes used in a regex literal) which is tested against each running event's title, description and all extended attributes. The first match is shown to the participant.

pickEventAutomatically: "Regular Expression"

To match only an event which has 'ApplicationForm' in its description, pass in pickEventAutomatically: "ApplicationForm".

Programmatic Logon

To allow users to join a chat without supplying a name and email, you can call programmaticLogon with the information if known. This is used as a way to lower friction and encourage engagement.

The programmaticLogon object must contain a displayname and email.

programmaticLogon: {
    displayname: "Simon Perkins",
    email: "simon@example.com"
}

Contextual Data

It is possible to send data to the M&E servers about the current user through the Plugin API so that it is displayed to the moderator when they appear in the chat. If you are embedding the chat interface into an environment where a user profile is being held (and perhaps programmaticLogon() is being used to provide a single-sign-on experience) is is often useful to view summary information about the user whilst chatting: E.g. for in-process candidates, understanding which roles have been applied for and their current stage; For graduate attraction, any information known about what grades they have or hope to get. Contextual Data can also be used to pass information through about the webpage the participant is currently viewing or role they are interested in if displaying a 'chat to us now' button next to each role on a careers website.

Include the contextualData in the initialisation object in the following format:

contextualData: {
    type: String,
    data: Object / URL / String    
}

The type parameter should be one of the following, which then corresponds to the expected format of data:

text - Any plain text, e.g. "User's phone number: 01234567890"
html - A string containing escaped HTML, e.g. "<strong>User's phone number:</strong> 01234567890"
url - A URL that will be loaded inside an iframe on the M&E moderator view, on which further info can be presented, e.g. "https://greenbugATS.example.com/useroverview?userID=1234567"
object - JS object format data. Will be stored with the user for data purposes, arbitrary data structure

Custom chat trigger

To trigger the event summary window from other elements on the page such as links (e.g. Click here to chat with us now) you can use the meetandengage_plugin.showJoinEventDialog(); method, e.g.

Click <a href="javascript:meetandengage_plugin.showJoinEventDialog();">here</a> to chat with us now!

Customising the plugin appearance

The plugin code will load the following CSS from the M&E servers at load time: plugin-standard.css. The styles defined here can be overridden with additional stylesheets or <style /> definitions.

Class	Purpose
.meetandengage_plugin_floatingChatButton	This is normally shown at all times at the bottom right of the screen, and when clicked will open the event summary window
.meetandengage_plugin_eventSummary	The event summary window, constructed from the supplied templates
.meetandengage_plugin_buttondiv	The 'join' button appearance within the event summary window
.meetandengage_plugin_eventTarget	The chat surface itself, when the user joins a chat
.meetandengage_plugin_eventLoading	A 'loading' animation, shown while the chat is initialised
.meetandengage_plugin_chatLobby	If the chat is currently at capacity the user is shown a 'you are in a queue' lobby
.meetandengage_plugin_controlbar	Added to allow dismissing the chat window and event summary window

if you prefer to start with blank CSS, you can pass an array into the instantiation object called resetCSS: []. The content of this can be one or more of "floatingChatButton", "eventTarget", "eventSummary", "chatLobby", "eventLoading". When including here, the element's class name will have a trailing _custom with no styles applied.

Custom content inside elements

To change the content of particular elements, a content object can be passed in, which accepts HTML in a string for each of the elements on the page, plus the special case controlbar, which is added to the lobby, summary and event target elements. Setting the href of links within the supplied HTML to the following will be replace as follows:

href	Substituted with
#close	Closes the current element, resetting the plugin if necessary
#minimise	Minimises the current element, or moves offscreen (for mobile/tablet use)
#unminimise	Restores the current element if minimised
#openeventsummary	Opens the event summary element - normally triggered from a floating 'live chat' button, or an inline element such as a button

For more drastic changes to the appearance or functionality of the chat, we recommend implementing the full plugin API

Back to Documentation Home