Toast

The Toast Component is part of the Ionic Component Set and is a banner of text equipt with a button. The Component can be configured to briefly appear and disappear with alerts for app users. Studio Users can format the Button Text and set the Link to a Page within the app, an external URL, email address, or a phone number.

Ideas for Using Toast

Alert app users to an important notice, an exclusive offer, or provide a timely reminder.
Add a button to the Toast Component to create a CTA. This can link to an external website, another Page in the app, or a Document.
Promote an upcoming event to your customers or partners.
In an event app give attendees an important reminder, such as signing up for a special session or signing up to receive presentation materials.
In a product or customer service app, link users directly to a product manual or other key product information.
Recently updated your app? Use Toast to tell returning app users about important changes.

If you’re looking for an alert that allows for more copy, or that dominates the Page, check out Banner.

Toast Properties

The Toast Component has the following properties:

Component Id - Sets the name of the component in the app. The Component Id can be referenced using JavaScript to add more functionality to the app as needed.

Pro Tip: It is a best practice to use only letters without spaces for the Component Id. Symbols, spaces, and numbers are not recommended.
Trigger On Page Load - Toggle on or off for the component to appear upon loading the page. Default is set to on.
Location - Sets the location of the component, either top, middle, or bottom.
Enter Delay (ms) - Sets the amount of time the component will appear in the app after the page is loaded. Between 0 and 10,000 ms.
Duration (ms) - Enter the duration of time the component will appear in the app. Between 0 and 10,000 ms.
Background Color - Sets the color of the background. There are two ways to set the Background Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
Text Color - Sets the color of the Text. There are two ways to set the Text Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
Header Text - Enter the text as it should appear in the header of the component.
Message Text - Enter the text as it should appear in the message of the component.
Show Button - Toggles on or off to display a button in the component. Default is set to off.
Link - Sets the link to another Page in the app or an external URL.

Pro Tip: Type in tel:5558675309 to link to a phone number with "5558675309" replaced with the applicable 10-digit phone number or mailto:emailaddress to open up the default email client from the app with "emailaddress" replaced with the email address you want to be sent the email.
Open in New Tab - Toggles on or off to open the link in a new tab. Default is set to off.
Button Text - Enter the text as it should appear in the app.
Button Text Color - Sets the color of the Button Text. There are two ways to set the Text Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
Boarder Radius (px) - Sets the boarder radius, between 1 and 100 px.

Toast Placement Settings

The Placement Settings for the Component sets which column(s) the Component will appear. Each Page of the app can have a different number of columns that are set in the Layout section of the Page Settings. The following Placement settings are available for this Component:

Column Start - Sets the column where the Component will start.
Column Span - Sets how many columns the Component will span.
Padding - Sets how much space will appear on the top, bottom, left, and right of the Component. When building a Page with multiple Components, the Padding will determine the overall spacing between Components.
Display Mode - Sets how the Component is displayed. If Both is selected, the Component will always show. Both are the default option. If Optimal is selected, the Component will only show if the browser supports the app. The main supported browsers are Chrome and Safari. If Degraded is selected, the Component will only show if the browser does not support the app. The main unsupported browser is Internet Explorer.