In this tutorial, we'll create a button to auto-populate a form with a message template. We'll use Reed Hastings’ LinkedIn profile to develop this workflow.
Check this video out to understand how it works!
1. Place a Button
Open the Page Editor
Start by navigating your browser to Reed Hastings’ LinkedIn profile.
Then, open the PixieBrix Page Editor, and grant PixieBrix access to the page.
Navigate to the Invitation Screen
Navigate to the invitation screen, where you can add a note to the LinkedIn invitation.
For me, I clicked “More” > “Connect” > “Add Note”
Place a Button
In the top left of the Page Editor, click Add and choose Button
Then hover over “Cancel” and click
PixieBrix should have added a button that says “Action”
Configure the Button
- Name the mod: I named mine “LinkedIn Message Templates”
- Customize the caption: I changed “Action” to “Greeting”
- Configure the Button Location: choose the following selector from the dropdown:
.artdeco-modal__actionbar
- Configure the Sites: change the default value from
https://www.linkedin.com/*tohttps://www.linkedin.com/in/*. Not that we addedin/*to the end, because then PixieBrix will only try to place the button on personal profile pages, and not company profile pages for example.
Save and Close the Invitation Modal
Finally, click Save in the top right of the Page Editor, and then X out of the LinkedIn invitation modal
2. Extract the person’s name
We’ll want to reference the person’s name as part of our LinkedIn message template
Add the Extract from Page brick
Click the "Add a brick: button
Then search “Extract From Page” and choose it
Select the Person’s Name
Click the Pointer Icon, hover over the name, and click
The Selector Value in the brick configuration should have changed to #main h1
Change the Property to name
Run the Mod to see the Output
Now go back to the LinkedIn Invitation Modal and click the button you created, Greeting
Then expand the Output Data in the Data Panel on the left side of the Page Editor
You can click the 📃 next to name to copy the property path to your data: @data.name
We will reference this later in the next step
3. Parse the First Name
Add the the Regex Extractor brick
Search for and add the Regex Extractor brick
Configure the Regex Extractor
Copy the data from your clipboard into the Input field
Next we’re going to write a Regular Expression to separate the first and last name.
Copy and past the the following expression into the Regex field:
(?<firstName>\S+).*
Here’s a bit more on Regular Expressions and the Regex Extractor brick for your reference.
Run the Mod to see the Output
Again, click your Greeting button to run the mod and see the output in the Data Panel
As you can see, the Regex brick parsed out the first name
Click the 📃 icon next to firstName to copy the property path to your clipboard: @extracted.firstName
4. Create a Message Template
Add the Set Input Value brick
To create a message template, we'll add the Set Input Value brick.
In the Brick Selection modal, search for "Set input value" and choose it.
Then click Add Item
Click the cursor icon in the Selector row. Then hover over the text input box and click.
In the Page Editor's Value row add a greeting.
We'll surround the variable @extracted.firstName with two sets of "{{"
For this tutorial, I'll use "Hi {{@extracted.firstName}}, it would be great to connect"
Test Your Set Input Value Action
Press the Greeting button to test the action. If you're happy with it, click Save and try the greeting from different profiles.
Part 2: Add Multiple Templates
Now that you’ve completed a basic template, let’s add a dropdown where you can choose from multiple tutorials.
Add a Popup Modal
Click the plus sign after the Regex Extractor brick to add a new brick that directly follows the it.
We’re doing this because we want our popup modal to come before the Set Input Value brick
Search for the “Show a modal or sidebar form” brick and add it.
Configure the Modal Form
- Form Title: Let’s change the Form Title to something more descriptive like “Choose a Template”
- Name: “template” - we’ll use this to refer to the output of this brick
- Label: “Template” - the label that will appear on the popup modal
- Field Description: we can exclude this
- Input Type: dropdown
Configure the dropdown options
Click the Add Item button to add some dropdown options. I’ll use the following:
- “Hi
{{@extracted.firstName}}, it would be great to connect” - “Hey
{{@extracted.firstName}}, I really enjoyed our chat. It would be great to connect”
Your brick configuration should look like this:
Reconfigure the Set Input Value brick
Select the Set Input Value brick in the Brick Actions
Change the value to @form.template and Save the mod
Test the mod
Now when you click the Message button you pervasively configured, it should present a popup modal with the two message templates
Part 3: Getting Fancy with Button Styling
Sometimes customization is fun when you really personalize the experience In this section we’ll change the color of the LinkedIn “Send” button as a visual indication that we’re ready to go.
Add the Highlight brick
After the Set Input Value brick, search for and add the “Highlight” brick
Configure the Highlight brick color
In the brick configuration panel, change the backgroundColor to #008000 which is the hex code for green and Save the mod.
Configure the Highlight brick rootSelector
In the brick configuration panel, click the grey rootSelector field and the Pointer Icon should appear
Click the Pointer Icon, hover over LinkedIn’s “Send” button and click it
Test the mod
Now when you click the Message button and choose a template, the Send button should be highlighted green. Pretty cool, right?
