Menu
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.
<script type="text/javascript" src="https://www.meetandengage.com/api/1.0/plugin.js"></script>
<script type="text/javascript">
meetandengage_plugin({
account: "meetandengageaccountname"
});
</script>
The plugin provides the following:
The following can be implemented as required:
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.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"
.
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"
}
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 structureTo 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!
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.
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