Moderate Bubble messages using Marketbase

Overview

Bubble is powerful no-code platform for creating digital products and makes it possible to create an application that powers chat along with a fully custom marketplace. This integration allows your team to use Marketbase as a dashboard for moderating, reviewing, and flagging these chat messages that are sent through Bubble – all without any code.

Integration guide

Step 1: Get API keys on Marketbase

Go to your Marketbase dashboard and select your workspace that you would like to integrate Bubble with. If you already setup an API key on Marketbase, you can skip to Step 2.

Open 'Settings' page and scroll down to the 'API keys' section.

Click 'Add key' and follow the directions to add a new key.

Once you have a key created, make note of the username and password for your API key as you'll need it in the following steps.

Step 2: Add message data type on Bubble application

Before we configure the connection between Bubble and Marketbase, we'll first want to ensure that your Bubble application has the data type for your chat messages. If you already have a chat message data type, you can skip to step 3.

Go to your Bubble dashboard.

Click on your app to open in the Bubble editor.

Click on the 'Data' tab.

In your 'Data types' tab, add a 'Conversation_message' data type which will store your chat messages. This should look something like this but may vary depending on the needs of your platform:

• Type name: Conversation_message
• Custom field: Conversation | Conversation (or any other type of data type that groups your messages)
• Custom field: Text | text

‍

Step 3: Add the Bubble API Connector plugin

With your data setup, the next step is to add the built in Bubble Plugin called 'API Connector'. If you already have the 'API Connector' plugin installed, you can skip to the next step.

Click on the 'Plugins' tab within your Bubble application's editor.

Click 'Add plugins'.

Select all and/or search to find 'API Connector' plugin by Bubble.

Click 'Install' within the API Connector section.

The 'API Connector' plugin should now be available from your list of plugins on your 'Plugins' tab:

Step 4: Configure Bubble 'API Connector' plugin and API calls

Now that you have the 'API Connector' installed, let's configure it to point to the Marketbase API.

From the Plugins tab with 'API Connector' plugin selected, click on 'expand' next within the 'API Name' section to edit your new API connector.

• If you already have an API connected, you'll need to click on 'Add another API' button first.

Input the following:

• API Name: 'Marketbase API'
• Authentication: 'HTTP Basic Auth'
• Username: [username from Marketbase settings in Step #1]
• Password: [password from Marketbase settings in Step #1]
• Shared header – key: 'content type', value: 'application/json'

Click 'expand' next to API call.

Input the following:

• Name: 'Create message event'
• Use as: 'Action'
• Data type: 'JSON'
• POST
• POST url: 'https://live.marketbaseapi.com/v1/events'
• Body JSON: { 'type': "MessageEvent", "channelMetaId": "<channelMetaId>", "userMetaId": "<userId>", "body": "<text>" }
• Set the default value for each body parameter to 'sample'  – these dynamic values within the body will be mapped to your actual data in Step 5.

Click 'Initialize call' to test the connection. After successful connection, you'll be prompted to map data types.

Change the createdAt and updatedAt fields to 'date'.

Step 5: Configure backend workflows

Now that you have your API connection to Marketbase configured, the next step is to setup the trigger on Bubble that will send data to Marketbase each time it's called.

Within your Bubble application's editor, click on the page dropdown and click 'Backend workflows'.

Click on 'Click here to add a backend workflow...'

From the dropdown, go to 'General' > 'New database trigger event...'.

Input the following to create the database trigger event which will be called every time a new message is created on Bubble:

• Event name: 'Create event on Marketbase'.
• Type: [name of your message data type (eg. 'Conversation_message')]

Setup an action on the database trigger event. Click on 'Click here to add an action...'

From the dropdown, click on 'Plugins' > 'Marketbase API - Create message event'.

This will add an action with the default values ('sample') for each field that was set in Step 4.

Click on a 'sample' field input and then click on 'insert dynamic data' button to map each field to dynamic data. These may vary depending on your data types within your application.

• (body) channelMetaId: Conversation_message Now's -> Conversation's -> unique id
• (body) userId: Conversation_message Now's -> Creator's -> unique id
• (body) text: Conversation_message Now's -> Text

‍

Step 6: Confirm workflow and connection is working

Your backend workflow is now configured and connected to Marketbase through the API Connector plugin. Let's test the workflow by adding sample data through the Bubble dashboard.

Within your Bubble application's editor, click on the 'Data tab'.

Click on 'App data' tab.

Click on your conversation messages view. eg. 'All Conversation_messages'

Click on 'New entry'.

Fill in test data.

Click create.

Example of how your messages app data might look like:

Each of these sample messages should go through the backend workflow that we created in Step 5. Confirm that these and new messages are being populated on the workspace within your Marketbase dashboard.

If you are running into any problems, feel free to email us at support@marketbase.app for help.