Step 1: Install the Plugin Go to your Bubble app editor.

Open the Plugins tab.

Click Add plugins and search for WGD Setup Mentions (or install it via your private plugin URL).

Click Install.

Step 2: Enable ID Attribute Support
Go to Settings > General.

Scroll down to Expose the option to add an ID attribute to HTML elements and check the box.

Click Save.

Step 3: Add Your Input(s)
In the Design tab, drag an Input or Multiline Input element onto your page.

Select the input element.

Scroll to the bottom of the property editor and set a unique ID Attribute, like commentInput.

Step 4: Create the Workflow
Go to the Workflow tab.

Create a new workflow trigger (e.g., Page is loaded or when a group is shown).

Add an action: Plugins → Setup Mentions (Tribute.js).

Step 5: Configure the Action Fields
In the plugin action step, configure the following fields:

Trigger Character: The character that starts the mention (e.g., @, #, :).

KeysToType: A comma-separated list of values the user will type to trigger a match (e.g., john, jane, jess).

ValuesToDisplay: A comma-separated list of values shown in the dropdown (e.g., John Doe, Jane Smith, Jess D.).

Attach to All: Choose:

"Input" to attach to all <input> fields

"Multiline Input" to attach to all <textarea> fields

"None" to use specific ID(s)

Id Attributes (only if Attach to All is "None"): Comma-separated list of element IDs (e.g., commentInput, replyBox).

Menu Show Min Length: Minimum characters typed before dropdown appears (e.g., 1).

Menu Item Limit: Max number of items in dropdown (e.g., 5).

Step 6: Test the Mentions
Preview your app.

Focus on the input field and type the trigger character (e.g., @).

Begin typing a matching name—you should see the dropdown suggestions.

Select a suggestion, and it will be inserted into the input.