Build a mod that captures input from the current page, passes that to a UiPath process, and then returns the output in a sidebar on the page! You can do this in five easy step with PixieBrix.
Feel free to use this playground page while building, but this mod assumes you have an UiPath process that returns a list of orders based on a name that is passed to it. To test, you may want to create a record in your database called Pixie Britt, as that's the name that will appear in this specific chat example.
Prefer to watch tutorials instead of read? You can watch this video to get a walkthrough of the text instructions below!
In order to create mods with PixieBrix, you will utilize the Page Editor, which is located within the Chrome Dev tools. To access it, simply right-click on any page and select Inspect. Locate the PixieBrix tab, which is typically the last one. A helpful tip: Instead of placing your dev tools on the right side, we recommend to dock them at the bottom of the page.
.png)
When building a workflow in PixieBrix (we call these "mods"), you'll begin by adding a starter brick which will determine how the mod is triggered. We have a variety of triggers, such as keyboard shortcuts, right-clicking on a page, and others, but for this example, we'll use a button that we'll add to the page.
Click the Add button next to the PixieBrix logo and choose Button. You'll notice sections on your screen become selectable. Click the existing button on the page that says "Submit" and you'll see PixieBrix place a new button on the page to the right of the existing Submit button.
.png)
Use the Button text field to rename the text on the button, and go to the Advanced: Item Options section to customize the styles of the button, such as changing the colors, or increase padding.
Feel free to replace the code in the Template field with this:
<button style="background-color: #5a19da; color: white; margin-left: 30px; margin-top: 3px; padding: 10px; border-radius: 10px"
type="button"><span>{{{ caption }}}</span></button>
Now any bricks you add in this pipeline will run when this button is clicked.
When you loaded the page, you may have seen a message shared by a chatbot. In order to extract the user's name from the chat message, we will utilize the Extract from Page brick. To accomplish this, simply select the + button located below the Button brick in your Brick Actions Pipeline (the panel second from the left).
Search for Extract from Page and hover over the brick, then click the blue Add button. Rename the Output field to something more clear, like user. Next, rename the property to name, and set the selector field to .chatlio-chat-header__primary-text
If you don't know the selector, you can use the green mouse button to select an element on the page that has the data you want to scrape.
.png)
Click your button on the page to run your mod and confirm that you receive data from that field. You can check this by looking at the Output tab in the Data Panel (far right side of the Page Editor). Click the icon before @user to view the output, which will have the from the chatbot.
Now we can reference that name value anywhere in our mod. Click the clipboard icon to the copy the path.
If you want to also capture the first chat message, you can add another property and use the selector .chatlio-message-body:first
In our workflow, we have a form that needs to be updated with the user's name, which we have just gathered. Now, let's include an additional step to set the field. To do this, simply click on the + button below the Extract from Page brick and add the Set Input Value brick.
In the selector field, we will set the id of the field, which is #customer-2, and for the value, we will use the path to the scraped name that we just copied: @user.name.
Feel free to run the mod again and you will notice that the first field in the form is now populated with the name from the chatbot (Pixie Britt). 🎉
Now we need to run the UiPath process to fetch the order info. To do this, click the + button below the Set Input Value brick. and search for Run a UiPath process brick.
Rename the output to something more clear like orders.
You'll need to connect your UiPath Integration, and then select the process. Depending on how your process is set up, you may need to select additional details, like the Strategy and Jobs Count.
You'll likely also need to pass the name of a user, and to do that, we'll simply set the name field to @user.name.
.png)
Run the mod and you'll see the response from UiPath in the Output tab of the Data Panel. Just like with the user name, we'll be able to access that response elsewhere in the mod by copying this path.
Now we need to make a sidebar that displays the output from the UiPath process. Click the + button below the UiPath brick, and search for Display Temporary Information brick. Inside that panel, you'll notice a Render Document brick appeared inside it. We'll come back to the Render Document brick in a second, but for now, set the title field in the middle panel to Orders. This will be the name of the tab that appears in the Sidebar Panel, which is helpful if you have multiple tabs.
Click the Render Document brick that is nested inside Display Temporary Information. You'll notice a Preview Panel on the far right side shows a preview of your Sidebar. Click the text that says Example document and edit the text in the middle panel that appears. You might change it to say something like View {{@user.name}}'s orders. You can also change the size of the header and even apply different styles in the Layout/Style section.
Notice how we can inject variables into text here. We use Nunjucks Templating to do this.
Click the example paragraph element in the Preview Panel, then click the trash icon to remove it. Click the three dots inside the innermost element (the Column) and select the Brick option. You'll see a new section appear in the Brick Actions panel (second panel from the left). In there, click the + button just below Brick and choose the Customized Table Brick.
Configure your table like this:
.png)
Run the mod and in seconds you'll see that ....
✅ the name and chat has been scraped from the chat widget
✅ the first field on the page has been set with the scraped name
✅ a sidebar panel shows the output from your UiPath process
Want to use your own brand in the logo at the top of the sidebar? Follow these docs for whitelabeling.
The last step is save your mod. PixieBrix will keep unsaved changes in the Page Editor, but for the changes to take affect when using the mod, you'll need to save. Click the save icon next to your mod to save the changes.
Congrats! You did it! Need any help? Join the PixieBrix Community Slack and we're happy to help troubleshoot any problems, show you how to add more features, or inspire your next build!
