Integrate Chat in Your Digital Customer Service Application

In the Digital Customer Service reference implementation, the chat component is deployed in the footer of the shell page so that chat sessions persist across page navigation.

If you want to create another shell page or show the chat dialog from an action, follow these steps.

Create a New Root Page

In the Digital Customer Service reference implementation, the chat component is deployed in the footer of the shell page so that chat sessions persist across page navigation. If you want to create another shell page follow these steps:

1. In Visual Builder, expand the Root Pages node, open the original shell page where the chat component appears.

2. Click the Code button:

   

3. Copy the oj-odcs-chat component from the footer of the original shell page, and then replace the oj-odcs-chat element in the foot of the new shell page. In the Components Search field, enter chat.

   Copying the code from the original shell page ensures that you have the correct ID, translations and correct references to application variables.

Show Chat with an Action

If you want to show the chat dialog from an action, follow these steps.

1. In the Web Apps navigator, click your application icon.

2. Click the Actions icon:

   

3. In the list of Actions, locate and select the ShowChatAction action chain.

4. In the Action Chain properties window, make sure the following entries are correct:

   • Component: {{ document.getElementById('odcs-chat') }}

   • Method Name: open.

Configure Chat to be Offered Only When Agents are Available

You can configure chat so that it's offered as an option to customers only when an agent is available. You just need to do the following two steps:

1. Set SVC_CHAT_INLAYS_ACCESS_ENABLED profile option to Yes.

2. Set the default value of the DCS chatPollingEnabled application variable to True.

Disable the Chat Download Button

If you don't want your users to have the ability to download chat transcripts at the end of a chat session, you can hide the Download button by adding to the application's app.css file:

div[slot="endChat"] > div > div:nth-child(2) > div:nth-child(2) {
    visibility: hidden;
}