Inbox

The Inbox component is a chat interface that allows users to interact with candidates. It provides a conversation selection panel, message sending capabilities, and candidate details. Certain panels can be hidden based on the configuration settings.

Parameters

Parameter	Type	Description	Required
action	String / Object	Can be initialize to initialize a new component or an object to call an action on a component.	Yes
token	String	Authentication token to authorize the component.	Yes
settings	Object	JSON object containing configuration settings for the Inbox component.	No
arguments	Array	JSON object containing configuration settings for the Inbox component.	No

Actions

Action	Description	Arguments	Settings
initialize	Initializes the component.		settings JSON object of new configuration settings.
updateSettings	Updates the component's settings.		settings JSON object of new configuration settings.
setConversation	Switches the active conversation.	conversationId ID of the conversation. Multiple arguments are passed in order in an Array.

Configuration Settings

Setting	Type	Description	Default
conversationId	string	The ID of the conversation you wish to show ('null' will show no conversation)	null
showCandidateDetails	boolean	Shows candidate details on the right side.	false
showCandidateDetailsEdit	boolean	Allow the editing of the candidate details.	false
showCandidateOpenExternal	boolean	Shows a button to open the candidate page, See the chapter 'Candidate Open External'	false
showCandidateAssigneeEdit	boolean	Shows the option to edit the user assigned to a candidate.	true
showCandidateLabelsAdd	boolean	Shows the option to add labels to a candidate.	true
showCandidateNotesAdd	boolean	Shows the option to add notes to a candidate.	true
showConversationSearch	boolean	Shows the searchbar in the conversation tab panel	true
showConversationFilter	boolean	Shows the filter options in the conversation tab panel	true
showSendMessage	boolean	Enables the ability to send messages.	true
showTabPanel	boolean	Displays the conversation selection panel.	true
showTab{TabName}	boolean	Displays a specific tab on the conversation selection panel.	true
showPauseChatbot	boolean	Allows pausing and resuming the chatbot.	false
showTopBar	boolean	Shows the top bar in the inbox	true
showAddTemplateButton	boolean	Enables the ability to add new templated messages.	true
showChatDisabledBanner	boolean	Enables the orange warning banner while the chat is disabled.	true

Initialize

To load the Inbox component in your application, you need to embed the component's iframe in your HTML. The iframe's src attribute should be set to https://api.recrubo.app/public/v2/embed/component/inbox.

Example

<iframe id="inboxFrame" src="https://api.recrubo.app/public/v2/embed/component/inbox"></iframe>

<script type="text/javascript">
const inbox = document.querySelector('#inboxFrame')

inbox.onload = (evt) => {
    const inboxSettings = {
        action: 'initialize',
        token: 'XX-XX-XX-XX-XX',
        settings: {
            inbox: {
                conversationId: 'xxxxx-xxxxxx-xxxxxx-xxxxx',
                showTabPanel: false,
                showSendMessage: false,
                showCandidateDetails: false,
                showPauseChatbot: false
            }
        }
    }

    inbox.contentWindow.postMessage(inboxSettings, 'https://recrubo.app')
}
</script>

Programmatically change the conversation

You might want to change the conversation programmatically, for example when a user clicks on a candidate in your application. You can do this by sending a message to the iframe window.

Example

<script type="text/javascript">
function changeInboxConversation(conversationId) {
    const inbox = document.querySelector('#inboxFrame')

    const changeConversationSettings = {
        action: {
            component: 'inbox',
            name: 'setConversation'
        },
        token: 'XX-XX-XX-XX-XX',
        arguments: [conversationId],
    }
    inbox.contentWindow.postMessage(changeConversationSettings, 'http://recrubo.app')
}
</script>

Events

Certain actions inside the Inbox Recrubo cannot or should not handle; therefore, we trigger an event so your own application can handle it instead.

Candidate open external

The candidateOpenExternalEvent is triggered from inside the Inbox. When this happens, we will post a message to the window element that hosts the Inbox iframe. All messages contain the following keys:

• component: the component name (default is 'recrubo' if it is a component agnostic)

• event: the event name (in this case 'inbox')

In the case of this specific event there are 2 extra keys:

• recruboId: the ID of the candidate the user wishes to open (within the Recrubo system)

• externalId: the ID provided by your system when creating the candidate in Recrubo

In order to show the candidateOpenExternal button in the inbox, ensure that the following setting is set to true when initializing the Inbox

{
    showCandidateOpenExternal: true
}