Using the Button Component

You can add your own customizable buttons in your Modals and Slideouts. By default, these buttons will adopt the styles from your Themes. To change the button background color and button font color, edit your Theme's colors.

The Button Component contains the following settings:

1. Alignment

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

2. 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!

3. 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 screenshot contains the default values.

3. Button Actions

The last option on the Button Component's settings bar is the Button Actions settings. Here is where you can assign various actions to your buttons.

Buttons can be assigned one of several action types. Each action is described below.

  • Go to URL: Users can be directed to another page with this action. You can trigger the page to open a new tab.
  • Go to Next Step, Go to Previous Step: These buttons will navigate your user to the next or previous steps within the same Modal or Slideout group.
  • Go to Custom Step: Assigning a custom step number to your button will take your user to a specific step within your Modal or Slideout group.
  • Dismiss Entire Flow: Users can exit out of a flow with this button action. The flow will not be considered complete when a user clicks on a button with this action.
  • 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.
  • 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.

Still need help? Contact Us Contact Us