Using the Button Component
You can add your own customizable buttons in your Modals and Slideouts. By default, these buttons will adopt the styles set in the theme. To change the button background color and button font color, edit your Theme's colors. When creating a button, you can modify the alignment, margins, styling and add a handful of button actions. Read on for more details on each of the customizable settings.
ProTip: If you need to get a button in a hotspot, try using an image of a button instead. It won't have all of the same functionality as a button component, but hopefully it can be a useful alternative until that feature is made available.
Your button will occupy a single row in your step. On this row, you can align the button Left, Center, or Right.
You can add space around your button with the Margin settings. By default, there will be a 5px margin to the top and bottom of your buttons. You can set negative margins for interesting effects!
Button Styling Options
This setting allows you to adjust the roundness of your buttons, change the font size, add padding, and change the width of your buttons. All values are measured in pixels. The above values are set by default but feel free to modify to your liking.
The last, but arguably the most versatile option in the button settings bar (thus far) are the 'Button Action' settings. Here, you can assign various actions to your buttons to happen on click. Let's dive into each available action.
Go to URL
This option will direct your guest to another page, either within your application or outside of it. You can trigger the page to open a new tab, and/or ensure that the flow is marked as complete once they've clicked the button! This is best used at the end of a flow to ensure that the flow closes and is marked in your analytics as completed.
ProTip: The URL section supports URL paths in the link field. For example. Say your guest is on appcues.com/dashboard and we want them to reach appcues.com/dashboard/flows. Entering /flows in the URL section will append it to the current URL path.
Note: Please enter the full URL including the 'https://' to ensure that they are redirected appropriately
Go to Custom Step
Assigning a custom step number to your button will take your guest to a specific step within your Modal or Slideout group. This is especially handy for flows that require a bit of 'branching logic'. You can go here to learn more about branching logic.
Enter the step number you'd like your guest to be taken to when they interact with this button. You'll notice the total number of steps in the modal or slideout group. You'll only be able to travel within the step group at this time, but if you'd like more functionality, please let us know here!
Trigger Appcues Flow
This action will launch the specified Appcues flow, allowing you to provide the user options for what to do next. You can get the ID from the 'Share' link, accessible on the Flow Settings page.
- Keep in mind that using this option will not redirect the user to the appropriate page if they aren't already on it. If you have a flow published to another page that you'd like the user to trigger with the button, use the 'go to URL' option above instead.
- This will trigger a flow only from the beginning. Utilizing a stepchild ID will not work with this feature.
You can now create and track an event within Appcues and use it for segments and targeting! Selecting "Track Event" will allow you to customize an event based on clicking your custom button. This event will then show up under the "Events" section of targeting.
- Note that these events will only be viewable to Appcues and cannot be pushed to any integrations or your own user properties.
- Skip to Next Step Group: This action will skip the current Modal or Slideout group, and trigger the next step group in the flow. If there are no step groups to follow, then the flow will be skipped and completed.
- Go To Next/Previous Step: This option will navigate your guest to the next or previous step within the current Modal or Slideout group
- Dismiss Entire Flow: Users can exit out of a flow with this button action. Think of it like a 'skip' action. That means that the flow will not be considered complete when a button with this action is clicked.
- Skip to Next Step Group: This action will dismiss the current Modal or Slideout group, and trigger the subsequent step group in the flow. If there are no step groups to follow, then the flow will be dismissed and completed.
We hope that the above options create the flexibility you need to design the flows you have in mind but If there's an action we missed, we'd love to hear about it.