Drop-in chat plugin
Version 1.1.0 - Released 13/09/2017
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://www.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