Optimize Toast Websites

Creating your website for the first time? Check out this Support Center article, Get Started with Toast Websites, for an overview of initial setup and basic content editing. You can also see upcoming updates on the latest features in Toast Web by navigating to Websites. 

In this Article: 

• Update Website Design
• Customize Your Navigation Bar and Footer
• Add and Manage Pages
  • Add an Untappd Beer List
  • Media
    • Media Gallery
    • Video Captions for Toast Websites
  • Integrate Websites with Instagram
  • Add Catering Form to Your Website
  • Add Gift Card Purchase Page to Your Website
  • Banners and Pop-Ups
  • Add Events to Your Website
  • Reservations
  • Add Google Reviews
  • Customize Modules on Your Pages
  • Add External Embedded Widgets
• Generative AI Tool for Websites
• Configure Website Menu
  • Menu Item Component
  • Menu Group Component
  • View Only Menu Builder
  • Custom Menus
  • Website Theme Selection and Customization
• Preview Your Website
• Video Overview of Websites Features
• Additional Resources

Update Website Design

Navigate to Websites > Edit Site in Toast Web to make site-wide changes to your website logo, colors, or text. The Site Template option will be grayed out after your initial Toast Websites setup, but you have the option to change your layout at any time by using the features within the Editor. See the Customize Modules on Your Pages section of this article for more details.
 

Back to top
 

Customize Your Navigation Bar and Footer for Websites

You can customize your navigation bar on any of your pages in the Websites Editor. In your Websites Editor, click on the navigation bar to open the Update Nav Bar menu on the right side of the screen. Changes you make to your navigation bar will appear on all pages of your website, so you don’t need to update it on each individual page. 

Toggling Overlaid on will move the navigation bar as a layer on top of the page content. When this is toggled off, the navigation bar is a separate element, and the page content starts directly underneath it.  Toggling the Sticky setting on means that the navigation bar will remain visible at the top of the page, even when someone scrolls further down. When this is toggled off, the navigation bar will not be visible if someone scrolls down the page. Primary CTA is a stand-out button that can be added to your navigation bar. Toggle it on and then select the button itself to update what it links to (like your Online Ordering menu). You can update your header layout to change how the logo and links are arranged.   Note: You can also select if you would like the shopping cart visible on each page by toggling Show cart to On. Be sure to publish your changes.

If you have a navigation bar style with links showing, then selecting those links will open the Update Nav List window, where you can rearrange, hide, edit, or delete the pages that show up on your navigation bar. Clicking and dragging a page to the right underneath another page will create a drop-down menu on your navigation bar, as shown below: 

Selecting your footer will allow you to customize the information that shows at the bottom of all of your website pages. 

Select + Add link to add a social media URL for your restaurant – the icon will automatically be added to the footer so that your guests can easily access your restaurant’s social media pages. 

Toggle on Other Settings as desired to show your hours, location, menu links, and more on your footer. Except for social media links (which you can add yourself), the information in the footer is automatically taken directly from your Toast Web setup. If you scroll down on the Update Footer window, you’ll see quick links to update your location name or hours if needed. 

Looking to customize your footer area even more?  See Websites Theme Selection and Customization in this article for more information. 

Note: 

• The toggle for Locations must be on for the Footer section to show on the website.
• When encountering broken links or 404 errors, verify the URL prefix to ensure it includes "https://" at the beginning. This simple check can often resolve connectivity issues and ensure proper access to web resources.

 Back to top
 

Add and Manage Pages for Websites

You can use the pages drop-down menu at the top of the Websites Editor to add, delete, and rearrange your website pages.

For your Menu and Online Ordering pages, you’ll see the option to Change Template at the top of the Editor. This will allow you to decide whether you want to display images, and how you want images and menu items to appear on these pages. Please note that you’ll only be adjusting the styling of your menus. If you need to change names, prices, or menu groups, you should do that with the usual Tost menu editing tools.

If you select + Add new page from the page drop-down, you’ll see the following options for creating new pages for your website:

• Content - creates another page similar to your homepage, where you can edit all the modules within the page.
• Form - creates a page that allows you to collect submissions from your guests (like a “Contact us” form). When creating a form, you’ll enter an email address that will receive all submissions to this form. You’ll be able to edit all the form fields on this page (and make them required fields if necessary) and update the submit settings (the email address that receives form submissions) at any time. If you need to update the email address these form submissions are emailed to, be sure to do so here.
• PDF - allows you to upload a PDF as a separate page on your website. This can be helpful for things like special holiday menus or events. 
• Loyalty - if your restaurant uses Toast Loyalty, you can create a dedicated loyalty signup page with consistent branding and an appropriate URL. All configurations and legal copy are pulled directly from your Toast Loyalty setup.
• Email Marketing - if your restaurant uses Toast Marketing, you can create a mailing list signup page with consistent branding and an appropriate URL. All configurations and legal copy are pulled directly from your Email Marketing setup.
• Catering - if your restaurant uses Toast Catering & Events, you can create dedicated pages on your site to embed your catering intake forms. All content is pulled directly from your Catering & Events forms, and all edits to those forms are reflected on your site.
• Gift Cards - if your restaurant uses Toast Gift Cards, you can embed a page on your site that will allow for gift card purchases. All content and configurations are managed in your Gift Card setup.
• Blank Page - creates a page without any content blocks, which you can add on to and customize as desired. 

Back to top
 

Add an Untappd Beer List for Websites 

Integrate your Untapped Beer List to your Toast Website so guests know what drinks you have available at your restaurant. 
 

1. Select Editor site, then from the Homepage dropdown menu, +Add new page.
   
   
   
   
2. Next, select Third-Party > Untappd Menu Page > Submit.
   
   
   
   
3. Enter your Location ID and Theme ID, then Submit.
   1. Note: If you need assistance locating your Location ID or Theme ID, select the Click here for Untappd help link or visit the Untappd website here.
      
      
      
      
4. Once submitted, you will have an Untappd Beer List added to your website, which can be viewed by navigating to Editor and selecting your beer list menu. from the Homepage dropdown menu. You can now interact with the page.  If you would like to make any changes, select the edit icon next to your beer list menu page to make any changes.
   1. Note: The content and appearance of your Untappd list are managed through your Untappd account. To update them, visit Untappd and make your changes there. Those changes will automatically be reflected on your Toast Website. Untappd is not currently integrated with Toast Menu functionality; updates made to one will not be reflected in the other.
      
      
      
      
5. Once complete, Publish your changes.

Back to top
 

Customize Modules on Your Pages for Websites

Modules are the blocks of content that make up your website's pages. Hovering over a module allows you to move it up or down on the page, delete it, or duplicate it. 

 

You can click on specific elements within a module to edit its appearance, such as the background color, spacing, style, and alignment, where applicable. Selecting a button will allow you to update the text, styling, and the link.

To update text within a module, click on the text itself. You can change the text right on the preview itself, and a text formatting menu will appear above the text box if you want to change the size, font, etc. 

Hovering over an image will give you the option to quickly replace it, or you can click on the image to open the Update Image menu on the right side of the screen for full editing options.

The image editor allows you to crop, rotate, or flip an image right within the Websites Editor, so you can make sure you’re showing exactly what you want your guests to see. When you upload an image, we will automatically scan the photo and generate a description that you can use for alt text to improve accessibility and aid in search engine optimization. You can edit this alt text at any time. All images you upload are stored in the Toast Websites image gallery, so any time you want to add or replace an image on your site, you can easily choose from any image you’ve uploaded in the past. This also includes any images you have uploaded for your menu items. 
 

 

To add a new module, select the arrow icon near the Websites navigation bar on the left side of the screen, and select the type of content you’d like to add: Welcome, Text, Single Image + Text, Multiple Images + Text, Media, Testimonials, Events, Reservations, or banners and pop-ups. 

 

Note: You cannot add modules to your Menu or Online Ordering pages.

To manage featured items and upsell recommendations, see the Enable Featured Menu Items and Upsell Recommendations section of Toast Online Ordering Pro: Menu Page Configuration article in Toast Web.

Back to top

Media for Toast Websites

Media Gallery

View all of your uploaded and social media (Instagram and Facebook) photos in one place from your Websites Dashboard. 

1. In Toast Web, navigate to Websites > Media Gallery.
2. Navigating to the Upload tab, you can select +Upload from Computer or drag and drop files to add to your media gallery. You can upload or delete multiple files by selecting them from the Media Gallery or your computer and confirming your selection. Note: The maximum size for image files is 5MB, and for videos, it is 50MB. You can add both photos and GIFs to this gallery. GIFs can be used anywhere a photo can be used on your Toast Website.

If you have not integrated Toast Websites with your Instagram account, you can do so within the Media Gallery in the Instagram tab. If you would like more information, you can take a look at Integrate Websites with Instagram in this article. Once integrated, images from your Instagram account will populate in your media gallery. 

Back to top

Video Captions for Toast Websites

When adding media to your Toast Website you can leverage the video captions tool by following the steps below.

1. Log in to Toast Web and navigate to Websites and select Edit Site.
2. In the Editor, upload your video by dragging and dropping the video file on your site or select +Upload from Computer or select your existing video on your page. Note: The max size for video uploads is 50MB.
3. Once, the video upload is complete, navigate to Video Caption Upload.
4. Upload your video by dragging and dropping the video file on your site or select +Upload from Computer. Here you can upload your Upload your SRT or VTT video caption file. Note: The max size for video caption uploads is 50MB.
5. Publish your changes.

Back to top

Integrate Toast Websites with Instagram

If you have an existing Instagram account for your business, you can connect your Instagram account to your Toast Website using your Instagram credentials. Once connected, you can import Instagram photos directly from your Instagram account into your Toast Website’s media gallery, from which then can be added to your website. See Instagram APIs and follow the steps under Instagram Basic Display API to get started.

Back to top

Add Catering Form to Your Toast Website

1. Log in to Toast Web and navigate to Websites > Your website.
2. Click on the Edit Site button.
3. In the top middle section of the page, open the Homepage drop-down menu and select +Add new page.
4. The Add new page pop-up will appear. From the left-hand panel, select Catering.
5. Select the Catering form from the available options, then click Submit.
6. A Page Name pop-up will appear. Enter your desired page name and URL Path, then click Submit to finalize the process.

Note: To access the Catering form, you must have an active subscription for Toast Catering & Events.

Back to top

Add Gift Card Purchase Page to Your Toast Website

1. Log in to Toast Web and navigate to Websites > Your website.
2. Click on the Edit Site button.
3. In the top middle section of the page, open the Homepage drop-down menu and select +Add new page.
4. The Add new page pop-up will appear. From the left-hand panel, select Gift Cards.
5. Select the Gift Card Purchase Page from the available options, then click Submit.
6. A Page Name pop-up will appear. Enter your desired page name and URL Path, then click Submit to finalize the process.

Note: To access the Gift Card Purchase Page, you must have an active subscription for Toast Gift Cards.

Back to top

Banners and Pop-Ups for Websites

There are two types of banners you can add to your page:

• Promotional banner: This banner appears below your navigation bar and can contain promotional text you’d like to highlight to your guests, or content from other parts of Toast Web (such as Toast Loyalty).
• Spotlight feature banner: This type of banner will appear in a selected location on your page. You can add multiple spotlight features, and the banners will swipe to display the additional banners after 4 seconds. Once you enable this mode, you can edit the background color, font, and placement, and you can select which of your Website pages this banner should be featured on. You’ll be able to add a description, optional URL link, and optional additional details.
• Persistent banner: This type of banner cab be shown on mobile device website visits to promote a single specific action for customers.

Pop-ups are another way to highlight special announcements to your guests. Select from one of Promos or Forms pop-up options, and then select the arrow on the Manage Pop-ups window to show a preview of the pop-up within the Editor. 
 

 

Select the pop-up on the Editor preview, and then select the gear icon to customize your pop-up.
 

 

Here, you can select pop-up style, placement, pages to display on, and timing (immediately on page load, or after a specific number of seconds). If you’re creating a pop-up form, you’ll also be able to add the email address for form submissions and a success message that will appear to let your guests know that their submission was successful. 

If you select Edit pop-up, you’ll be able to change the text, images, and styling of the pop-up itself.
 

 

Select Done to save your changes.

If you want to turn a pop-up on or off, you can do so using the toggles from the Manage Pop-ups settings.
 

Back to top
 

Add Events to Your Website

1. Log in to Toast Web and navigate to Websites > Your website.
2. Click on the Edit Site button.
3. From the left-hand panel navigate to Events.
4. Drag and drop the event into the desired section of your website.
5. Click on the event box, where you can adjust the following settings:
   
   • Vertical spacing
   • Background color
   • Separating line
6. Select the +Add new event  and input the following details:
   • Event Name
   • Event description
   • Date
   • Time
   • Link
7. After completing your edits, click Add, then select Save in the top right corner to apply your changes.

Note: Only a maximum of 10 events can be added in the Add Events section on the Websites page.

Back to top

Reservations for Websites

When using the Reservations widget, guests can submit reservations on your website based on your Toast Tables settings.  This also includes the ability to require a deposit for reservations.  See Get Started With Toast Tables Deposits for more information. 

   

Want more information on Toast Tables? See Get Started with Toast Tables in Support Center.

Add Google Business Profile Reviews to Toast Websites

When Google Reviews are connected to your Toast Website, Toast will automatically display your recent 4- and 5-star ratings so guests can see what others have shared about your business. Every time you receive a new 4 or 5-star review, your website will automatically update. 

1. In Toast Web, navigate to Websites > Editor & Branding. 
2. Select the Edit Site button.
3. If you are adding Google Reviews for the first time, select +Add from the left navigation.
4. Drag and drop the Testimonials module into your desired section. Note: If you have not connected your Google Business Profile to your Toast Website, you will be prompted to do so when you drag and drop the Testimonials module in your Websites Editor. 
   
    
   
   
5. Select I agree to the following Toast terms > Connect Google.
   
    
6. Once connected, the top 6 reviews will be displayed on your website. 
7. Save and publish your changes. 

If you have added Google reviews to your website and would like to disable the feature and/or add reviews manually, toggle Show Google Reviews to Off. Save and publish your changes.

Back to top

Add External Embedded Widgets

Note: Custom Scripts will allow you to better integrate external, non-Toast features with your Toast Website without needing a specific integration. This component will not interact directly with any content on your Toast Website, and it will not be style-matched to your Toast Website. For your best experience, it is recommended to work with Toast features and products.

Back to top

Generative AI Tools for Websites 

If you need help generating content for your website, you can use the generative artificial intelligence (AI) tool in the website editor. This tool will assist in creating written content personalized to the experience you want to deliver to help you get your site closer to launch. To ensure you are using Toast generative AI tools, see Toast Generative AI Tools: Responsible Usage for Customers.

1. Log in to Toast Web and navigate to Websites > Edit page (button). 
2. Review Toast's AI-powered website assistant's terms of service and select Accept or Close. If you select Close, you can revisit and accept the terms from your Websites Settings page.
3. Next, select any text box module on your website draft and utilize the AI Assistant button. 
   
   
   
   
4. Within the AI module, you can enter a prompt to inform the AI model of what you want to say.  The AI assistant will generate content based on your entered prompt or predefined AI suggestions. Once the content is generated, you have the option to select the following to revise the generated content with Quick AI Edits:
   1. Rewrite it differently 
   2. Adjust for clarity 
   3. Fix grammar
   4. Adjust length 
      
      
      
      
5. Once you are satisfied with your updates, Publish your changes. 

Back to top

Configure Website Menus

When configuring your menus in the Websites editor, you can select the menu module to make edits that sync with your Toast Web menu data. This allows you to promote specific menu items or menu groups in places other than on your menu and create a unique menu layout. 

Back to top

Websites Menu Item Components 

1. In Toast Web, navigate to Websites > Edit Site. 
2. Navigate to Site Components > Menu Items.
3. Drag and drop the Menu Items component to the desired area of your menu. Note you can resize the component directly in the module.
4. Select the component, the menu item you would like to be featured, and the information you would like visible. ​
5. Once complete, Publish your changes. 

Back to top

Websites Menu Group Component

1. In Toast Web, navigate to Websites > Edit Site. 
2. Navigate to Menu Components > Menu Groups.
3. Drag and drop the Menu Group module in your editor.
4. Select the module and select the available menu group for your restaurant from the drop-down menu. Note: The module can be resized or moved once added.
5. Once complete, select Publish. 

Back to top

1. Log in to Toast Web and navigate to the Menu Builder.
2. Select any Menu, then select Edit.
   
   
   
   
3. Scroll down to Channel Visibility to see Websites View-Only as a toggle.
4. oggle this to on for any menu you want to appear on your View-Only Menu.
5. Save and publish your menu changes.

Note: 

• If you expect to see the Websites View-Only menu as a toggle and do not, confirm that you have websites enabled on your Toast account.
• If you are not seeing your updates on your Toast Website’s menu, please confirm you saved and published your menu configuration changes after toggling Websites View-Only to On.

Custom Menus

• Full-Size Welcome Section and New Images Fit Options (2:42)
• New Options for Renaming Navigation and Header (1:22)
• Section Padding & Map Control (1:14)
• Fonts and Hyperlinks in Text Editing (1:24)
• Events Module Demonstration (2:04)
• Add Links to Images (1:16)

1. Add a full-sized welcome image module to make a strong visual impression on your guests. 
2. Adjust the position of the text box and add text.
3. Customize the box color to blend with the background.
4. Disable unnecessary buttons.
5. Use the toggle to fit the photo space and display the entire image. Review the complete image.
6. Observe the image's aspect ratio adapting to screen size changes.
7. Save and Publish the changes.

• Get Started with Toast Websites
• Domains for Toast Websites and Online Ordering Pro
• Locations and Brands for Toast Websites and Online Ordering Pro
• Marketing & Analytics for Toast Websites and Online Ordering Pro
• Get Help with Toast Websites