Popup notifications for your visitors with this lightweight and easily customizable alert message. Include them inline within your content, or have them floating in a fixed position within the browser window.
This Toast popup is configured to fade in after 2 seconds, then pause here for 20 seconds and then fade back out again. We've not enabled cookies, so this popup will reload when and if the page is loaded again. We've placed this example inline with our content, but you want position it in a fixed location as well.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco ex ea commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Toast gives you the ability to display popup notices, alerts and more, whether inline in the content of your page, or fixed to a specific location on the page.
Toast allows you to use cookies to detect if the visitor has dismissed this Toast popup in the past, and if so not display it for a set period of time.
Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.
When enabled a preset margin will be added to the base of the tool. Foundry allows you to configure the Base Margin preset to your liking within the Control Center. The Base Margin can be configured independently at each of the 6 responsive breakpoints.
Enabling this feature adds a small text-based header section to the top of the Toast popup. It includes an icon for closing the popup as well as a Title and Small Title. All three are optional and customizable.
Adds a Title label to the small header that sits at the top of the Toast popup.
Here you can customize the Title text that is optionally included in the Header section of the popup.
Adds a Small Title label to the header that sits at the top of the Toast popup. This element positions itself accordingly based on whether the main Title is turned on or off.
Here you can customize the Small Title text that is optionally included in the Header section of the popup.
When enabled a toggle icon is added to the Header section. This allows visitors to close the Toast popup by clicking it.
Let's you choose from a variety of icon styles for the closer toggle button.
Here you'll decide how your Toast popup will be displayed. By default we place it inline with the rest of your content. You can however also choose to place it in a fixed position within the browser window. We offer several choices for this fixed style positioning.
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background of the header section of the popup. You're also provided an option to choose a custom one-off color as well.
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the title text within the header section of the popup. You're also provided an option to choose a custom one-off color as well.
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the small title text within the header section of the popup. You're also provided an option to choose a custom one-off color as well.
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the closer icon within the header section of the popup. You're also provided an option to choose a custom one-off color as well.
This color picker provides you a way to customize the background of the main content section of the popup.
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the border of the Toast popup. You're also provided an option to choose a custom one-off color as well.
Enabling this feature removes the padding from the Toast popup's main content area. This allows you to instead use a Spacing tool to create custom padding. This provides more granular control when needed.
This feature adds a border to the outer edge of the Toast popup as well as a divider border between the header section and the main content area of the popup.
Here you can adjust the width of the Toast popup. This width is only applied to fixed positioned popups and is not applied when using the inline position mode.
This is applied uniformly to the popup up at all responsive breakpoints by default. You can however click the small + icon above this setting to adjust the width at each individual breakpoint for more granular control.
Lets you choose the unit of measure used for the width setting above.
Used to add a decorative shadow to the Toast popup. Foundry provides a variety of preset shadow styles, as well as access to a user defined preset that you can configure in the Control Center. Additionally for one-off shadows there is also a custom shadow option where you can create a unique shadow style, setting its positioning, size, spread and color.
Enabling this feature will have the Toast popup fade in after a specified period of time. When disabled the Toast popup will be visible immediately and will not be delayed.
This is the amount of time in milliseconds that Toast will wait before fading in. This setting is only applied if the Fade in on Page Load feature is enabled.
This feature, when turned on, will fade out the Toast popup after a specified period of time.
This is the amount of time in milliseconds that Toast will wait before fading out. This setting is only applied if the Fade Out After Delay feature is enabled. Note that you must also being using the Fade in on Page Load feature for the Fade Out option to be enabled.
This feature, off by default, allows you to detect if the visitor has dismissed this popup previously. If they have dismissed it previously and the cookie has not yet expired, then the popup will not be displayed.
When disabled the popup will be displayed to the visitor each time the page is loaded, whether they've dismissed it in the past or not.
This is the amount of time, in hours, until the cookie expires. If the cookie has expired then the visitor will see this popup again.
Allows you to adjust the layering of elements using a custom z-index value.
Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.
This field allows you to replace the default HTML Comment with your own text.
Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.