How to show the Chat window after clicking "Message" on the Profile Page when a Conversation Exists

If you would prefer the template to show the standard desktop or mobile conversation view, instead of the new conversation form after clicking the "Message" button on the profile page, this mini guide explains how to set up this functionality.

In order to set this up on the profile page, we need to first detect if a conversation already exists between the Current User and the profile page User. There are a few ways to do this, but we can do this by setting a custom state ("Existing Conversation") when the profile page is first loaded. This custom state's value will store the unique ID of the existing conversation between the Current User, and the profile page User (i.e., the Current Page User). If there isn't an existing conversation between the Current User and the Current Page User, the "Existing Conversation" custom state value will be empty.

This way, when the Current User clicks the "Message" button, the workflow will utilize this custom state value (the existing Conversation thing) and navigate the Current User to the messages page with the parameter "c = [Existing conversation custom state's unique ID]", instead of the parameters "v=new", "u=[profile page user unique id]" as it is setup currently.

Step-by-Step-Guide

1. Navigate to the profile page in the editor. In the element search input, search for the Group Profile/Content Container element and select it from the dropdown:

2. Click on the elements "inspector" icon (the "i" icon), to open the Element Inspector. The Element Inspector displays all of the custom states set on this element (shown below). We will use this element to set up our "Existing Conversation" custom state (type: Conversation, list: no) in Step 3.

3. Click on the "Add a new custom state" text:

4. This will open the "Create a new state" popup. Enter the following information into the popup and click the "Create" button:

5. After creating the custom state, it is displayed within the Element Inspector panel:

6. Next, we need to setup the workflows to set the value of this custom state to the Conversation between the Current User and the Current Page User (if a Conversation already exists between them). To do this, navigate to the workflow tab and click on the "Pageload/Every X Seconds Workflow folder":

7. Add a new "Do When Condition is True" event with the following 'only when' condition:

8. Set the value of the "Existing Conversation" custom state by going to Element Actions --> Set state:

9. Choose the Group Profile/Content Container element from the element dropdown and the "Existing Conversation" custom state from the custom state dropdown:

10. Now we need to set the value of this custom state to be the Conversation that exists between the Current User and the Profile Page User. To do this, we can use the dynamic, filtered expression shown below:

Now, we can utilize this custom state value in the Send Message button workflows in the next steps.

11. In the editor, click on the "C. Send Message" workflow folder: This workflow (shown below) is run when the Current User is viewing a fellow User's profile page, and has clicked this Text Button Send Message element in order to potentially start a Conversation with this fellow User. This workflow navigates the Current User to the Messages page, with the parameters: v=new and u=[the unique ID of the User whose profile they are viewing].

12. We need to modify the 'only when' expression by adding "and Group Profile/Content Container's Existing Conversation is empty":

This means that this workflow will still only occur when a conversation doesn't already exist between the Current User and the Current Page User (i.e., the Existing Conversation custom state is empty). With this workflow, the Current User would be navigated to the messages page, the FG Create New Conversation element would be shown, and the Current Page User would be automatically set as one of the selected recipients for this potential new conversation.

13. Next, right-click this event and select "Copy":

14. Right-click the "click here to add an event" square, and select "Paste" in order to duplicate the just-copied workflow. (We are then going to make some slight modifications to this duplicate workflow, so that it runs when a conversation already exists between the Current User and the Current Page User).

15. After the workflow is pasted, change the 'only when' condition so it states "Only when: Current User is not Current Page User and Group Profile/Content Container's Existing Conversation is not empty" (i.e., change "is empty" to "is not empty").

16. Modify the "Go to page messages" action within this workflow by deleting the "v" and "u" parameters, and adding the parameter "c = Group Profile/Content Container's Existing Conversation's unique id" (these steps are shown in the GIF below).

You're all set! 🙂👍Users will automatically be shown the desktop or mobile chat windows when this workflow is run. Please don't hesitate to email support@littlebaytech.com with any questions!

Last updated