Skip to main content

How do I Add and Configure Cancel Button for a Web Page on the Web Builder?

Azavista Support
Updated

Adding and Configuring Cancel button on a Webpage

Overview

The Cancel Button allows users to exit or cancel an action on a webpage by redirecting them to a specified URL. Using the Web Builder, you can add and configure the Cancel Button by defining its appearance, behaviour, dependency conditions, navigation target, and placement within the page layout.

Step-by-Step Approach

1. Access the Web Builder

  • From the Event Dashboard, navigate to the Content module.
  • Select the Pages submenu.
  • Open the required webpage in edit mode.

2. Drag and Drop the Cancel Button

  • From the Web Builder, locate the Cancel component.
  • Drag and drop the Cancel Button onto the desired location on the webpage.

3. Enter or Edit the Hexadecimal Color Code

  • Select the Cancel Button to open its Settings panel.
  • Enter or edit the hexadecimal (hex) color code to define the background or text color of the Cancel Button.

4. Enter or Edit ID

  • Select the Cancel Button.
  • Enter or update the ID field.
  • The ID uniquely identifies the button and can be used for internal reference or dependency configuration.

5. Select Dependency from the Dependency Select Field

  • Choose a dependency from the Dependency select field.
  • Dependencies control when the Cancel Button is displayed.
  • The button appears only when the configured conditions are met.

6. Select Section Version Type from the Section Version Type Select Field

  • Select the appropriate Section Version Type.
  • This defines how the Cancel Button behaves across different versions of the webpage.

7. Enter or Edit Title

  • Enter or edit the Title field.
  • It serves as the primary identifier for a web page for both search engines and users.

8. Select URL from the URL Select Field

  • Choose a URL type from the URL select field.
  • This defines where the Cancel Button redirects the user.

9. Enter a New URL With or Without HTTPS

  • Enter the destination URL manually.
  • The URL can be entered with or without the https prefix, depending on your configuration.

10. Select Target from the Target Select Field

  • Select a Target option.
  • Define whether the URL opens in the same tab or a new tab.

11. Rename the Button Using Styling and Formatting Options

  • Use the available styling and formatting options in the Web Builder.
  • Rename the Cancel Button and adjust its appearance as needed.

12. Manage the Cancel Button

  • Reposition the Cancel Button using drag-and-drop within the page layout.
  • Remove the Cancel Button if it is no longer required.

13. Save and Apply Changes

  • Save and publish the webpage to apply the configured Cancel Button settings.
  • Preview the webpage to confirm that the Cancel Button displays and functions correctly.

Related to

Related articles