Drop-in chat plugin
Version 1.1.0 - Released 13/09/2017
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.
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.
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).
- 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
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.
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
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
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.
programmaticLogon object must contain a
displayname: "Simon Perkins",
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.
contextualData in the initialisation object in the following format:
data: Object / URL / String
type parameter should be one of the following, which then corresponds to the expected format of
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. "
object- JS object format data. Will be stored with the user for data purposes, arbitrary data structure
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.
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.
|This is normally shown at all times at the bottom right of the screen, and when clicked will open the event summary window
|The event summary window, constructed from the supplied templates
|The 'join' button appearance within the event summary window
|The chat surface itself, when the user joins a chat
|A 'loading' animation, shown while the chat is initialised
|If the chat is currently at capacity the user is shown a 'you are in a queue' lobby
|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.
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.
href of links within the supplied HTML to the following will be replace as follows:
|Closes the current element, resetting the plugin if necessary
|Minimises the current element, or moves offscreen (for mobile/tablet use)
|Restores the current element if minimised
|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