Feel free to use this playground page while building, but this mod assumes you have an AARI widget that returns information 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.
If you prefer to watch, here's a video walking through the below text!
Before beginning, import this file to your Automation Anywhere control room. This CoPilot process takes a user and returns the orders associated with the user.
To build mods with PixieBrix, you'll use the Page Editor. This is found in the Chrome Dev tools, which you can access by right-clicking on any page and choosing "Inspect". Look for the PixieBrix tab (typically the last one). Pro tip: Dock your dev tools at the bottom of the page instead of the right side.
.png)
When building a mod (automation workflows built in PixieBrix), you'll start with a "starter brick" which specifies how you want to trigger the automation to begin. You can start a mod in a variety of ways, but for this example, let's use a button that we will add to the page.
Click the Add button next to the PixieBrix logo and choose Button. You'll notice 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 next to the Submit button.
.png)
You can customize the text on the button, and you can customize the styles by clicking Advanced: Item Options.
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 be triggered when this button is clicked.
You might have noticed when you loaded the page that a chatbot shared a message. To retrieve the name of the user from the chat message, we'll use the Extract from Page brick. To do this, click the + button below the Button brick in your Brick Actions Pipeline (the second panel 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 username. 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 caret before @username and you'll see the name property has been set with the name from the chatbot.
You can access that value anywhere in the mod by referencing it's path. You can click the clipboard icon next to the field to copy it's path.
In our workflow, we have a form that needs to be updated with the user's name, which we've just scraped. Now let's add another brick to set the field. To do this, click the + button below the Extract from Page brick, and add the Set Input Value brick.
In the selector field, we'll specify the id of the field, which is #customer-2, and for the value, we'll use the path to the scraped name which we just copied: @username.name
Go ahead and run the mod again and you'll see the first field in the form is now set to the name from the chatbot (Pixie Britt). 🎉
Now we need to make a sidebar that displays our AARI widget. Click the + button below the Set Input Value 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 AARI CoPIlot. This will be the name of the tab that appears in the Sidebar Panel, which is helpful if you have multiple tabs.
Now, delete the Render Document brick and click the + button just below body to add the IFrame brick.
Update the URL to specify your AARI link, and customize the width and height to your preferred settings (we recommend 98% and 100%, but you can play around with this to see what feels right!)
Notice in our AARI link we are passing the username with {{@username.name}}. This is a great way to reference variables in strings throughout your mod. This allows us to pass data from the page (the username) to Automation Anywhere through the AARI widget.
Here's how to determine what your custom URL should look like.
Run the mod and in seconds you'll see that ....
✅ the name has been scraped from the chat
✅ the first field has been set with the scraped name
✅ a sidebar panel appears displaying your AARI widget with information about that user
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!
