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.

Alignment

Your button will occupy a single row in your step. On this row, you can align the button Left, Center, or Right.

 

Margins

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.


 

Button Actions

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 step child ID will not work with this feature.

 

Other Options

  • 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 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 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.

Still need help? Contact Us Contact Us