Butternut AI Guide

Edit Images

Images are very easy to edit on butternut AI. There are 4 ways to change the existing image on any section.

  1. Regenerate an image - With the powerful Regenerate tool on Butternut AI you can regenerate the images on the same theme or keywords you provided while generating the website. Click on Image > Click on regenerate Icon(first one) > 
  2. Generate with AI - Click on Image > Click on AI Icon > Add your keywords(be specific) >Save. If you have added custom keywords, you can use the regenerate icon to show you images based on your new set of keywords.
  3. Stock images from Unsplash - You can find stock images by going to Upload icon > Choose Unsplash > add your keywords > select image >Save
  4. Upload from your computer - You can upload image from your computer in any format png, jpeg or svg.. Ideal size is <5MB. But Butetrnut Ai engine also optimizes your file size. Once you upload you can also select, zoom in the part of the image you want to use in the frame. Note - All images displayed or generated for your website are copyright free. 


Edit Text

On Butternut AI you can edit the test on any section easily. You can also instruct the AI to change it as per your instructions. When you hover your mouse to the text you want to edit the editing options will appear:

  1. Edit Option: Use the editor to input new text, change alignment, add links, change color, and fonts.
  2. Regenerate Icon: Click this icon to ask AI for more options if you don't like the current text. You can regenerate multiple times.
  3. Instruct AI with comments Icon: Use this icon to give specific instructions to AI, like including certain words or making it more SEO-optimized or translating it to a different language etc.


Add Logo, Change Theme Colors and Fonts

In this section I will show you how to add your branding, logo, colors, fonts on the website generated by butternut AI.

  1. Change or hide Business name on Navigation bar or Menu - To add logo to your website header click on the edit icon on the top website navigation bar > Click on Edit Navbar option > Popup will open which will have option edit or hide your business name
  2. Add Logo - To add logo to your website header click on the edit icon on the top website navigation bar > Click on Edit Navbar option > Popup will open which will have the option to add logo > Upload logo and Click Save. 
  3. Change the size of the logo - click on the logo uploaded > it will show you the edit icon ? click on it and it will show you + and - icons to increase or decrease the size of the logo. Once you have achieved the right size click on Save button
  4. Add Favicon - To add Favicon to your website header click on the edit icon on the top website navigation bar > Click on Edit Navbar option > Popup will open which will have the option to upload favicon > Upload image and Click Save. 
  5. Change Theme Colors - To change the theme colors go to the top navigation bar > click on Change Theme > pick the color you want > Click on Apply button at the bottom of the popup
  6. Change Font on Website - To change the Font of the website go to the top navigation bar > click on Change Theme > pick the Font you want for primary(headings) and secondary(subheading, paragraphs) text > Click on Apply button at the bottom of the popup
  7. Change Font Size of Website - To change the Font size of the website go to the top navigation bar > click on Change Theme > Scroll to font size> You will see option to increase or decrease the font size of website content proportionally > Use these options > Once you have the optimal font size you wish > Click on Apply Button at the bottom of the popup


Embed Youtube Videos

To add YouTube videos onto a website generated by Button AI in a few simple steps. Following are the steps

  1. Access the website generated by Butternut AI.
  2. Click on the "Add Section" + icon option located between any two sections on the website.
  3. Select "YouTube Video" and click on "Generate."
  4. A new section will appear with a button "Add Section"
  5. Click on it on it will ask you to enter Youtube video embed code in the text box
  6. Steps to get Youtube Video Embed code - Go to YouTube, select the video you want to embed, click on "Share," then "Embed," and copy the code provided.
  7. Return to the website, paste the code in the designated area, and save changes.
  8. The YouTube video will now appear on the website.
  9. Repeat the process to add more YouTube videos as needed.


Edit Sections - Change layout, hide, delete, add items

You can make changes to the existing section like change layout, hide, delete, move them up or down to change the sequence of sections. Following are the steps - 

  1. Hide, delete, change sequence of sections- Hover over the section on the website that you want to edit. Options to move the section up and down, hide the section, or delete it will appear.
  2. Change Layout - To change the layout of the section, click on the regenerate icon on the navbar on the top right corner of the section. Keep generating layout options until you find one that suits your preferences.
  3. Edit Text, images or content - Edit icons by clicking on them, edit text by hovering over the text and clicking on the edit option.
  4. Add CTA Button - Add a CTA button by selecting the option to add a button at the bottom or each section or Add button option is also available in between components of a section, Once you click on Add Button popup will appear through which you can edit an internal or external link to that button, pick design for the button, change text on the button and also the color etc. Once you have made the changesSave your changes and review the updated section layout.
  5. Add Items or subsection - Click on the Add item button which appears at the bottom of each section. When you click on it it will generate a new component of the same format in that section. 


Add CTA Buttons

To add call-to-action buttons to different sections on the websites for increased user engagement and navigation use the following steps - 

  1. Identify the section where you want to add the button.
  2. Place your mouse over the section where you want to add the button.
  3. Click on the "Add Button" option.
  4. Choose whether to link the button to an internal page or an external URL.
  • For internal page: Select a page or create a new one, choose a button color, and save.
  • For external URL: Enter the URL and save.
  • You can also pick the color, text, layout of the button on this popup.
  • Hit Save button
  • Preview the button to ensure it is working correctly.


Add New Section

It could be a case where you need more sections than what Butternut AI generated for you. To add a section click on the + icon which appears between any two sections on the website. A popup will appear which will have three options to create a new section 

  • Pick Section Type - You might be looking to create a section by section type e.g timeline, about us, book an appointment etc. You can pick any option on the popup and the respective section will be created for you with relevant content and images.
  • Pick Section layout - Sometimes you might have a section layout in mind like 3 columns or a banner image etc, you can then pick a section layout from the options. Once you select a layout a text box will appear to ask you about the section heading or description you are about to create. It is optional. Once you click generate, a new section will appear for you built by Butternut AI
  • Generate a section with AI - If you want to create a custom section which is not available in section type or section layout or you have any custom requirements, you can pick this option to create a section with just prompts. Click on this option > A new section will be created with a chatbot >You can tell your requirements of this section in this chatbot and AI will generate it for you. You can then simply talk to the chatbot to edit or customize it. You can ask it to change design, layout, content, images etc. Tip here will be to be as specific as possible.


Add or Edit Pages

When you build your website on Butternut AI you have the flexibility to add, delete, and edit pages on a website generated efficiently.

Adding Pages:

  1. Click on "Add Page" in the main header.
  2. Select the type of page to add (e.g., FAQs) and click on "Save Changes."
  3. The AI will generate relevant content for the new page.
  4. Edit the content as needed.
  5. For pages not listed, create a blank page and give it a title.
  6. Wait for the AI to generate the page.


Editing Pages:

  • Change sequence of pages on header or footer - Click on the Edit icon on Navbar or Footer.Click on "Edit Pages" to manage pages. You will see options to move sections up and down, delete or hide a page 
  • Change URL of the page - Click on the Edit icon on Navbar or Footer. Click on "Edit Pages" to manage pages. An option next to the page name will appear where you can change the URL of the place. Click on the text box and edit it with your choice of url and click on save button.
  • Delete a page - Click on the Edit icon on Navbar or Footer.Click on "Edit Pages" to manage pages. You will see options to move sections up and down, delete or hide a page.


Adding a custom page:

If you cannot find the page type in the popup you can generate a blank page and add custom sections to it.

Following are the steps:

  1. Click on "Add Page" in the main header.
  2. Select Blank Page
  3. Add sections to the page.
  4. Choose a layout for each section.
  5. Generate multiple sections as required.


Add Blogs on Website (Custom or AI generated Blogs)

Blogs are a great medium to build a loyal community of your users and to help rank higher in google. On Butternut AI you can easily Add a blogs pages, write your own custom blog or generate a highly SEO optimized blogs in just a few clicks using AI.

  1. Add Blogs Page - Click on "Add Page" at the top of the website.Select the "Blog" page and save changes. Choose between writing your own blog or using AI to generate one.
  2. Create a custom Blog - Pick a custom blog option which appears after the Add New Blog button. An editor will appear through which you can create and format an entire blog.
  3. Create a blog using AI in just a few clicks - 
  • Pick Generate with AI option which appears after the Add New Blog button. 
  • Provide a specific topic and keywords for the blog.
  • Select the tone and target audience for the blog.
  • Choose a title from the suggested options or regenerate for more choices.
  • Review and edit the blog content, including paragraphs and images.
  • Optimize the blog for SEO by adjusting settings like URL, title, and meta description.
  • Preview the blog, make any final edits, and then publish it.
  • Repeat the process to create additional blogs if needed.


Add Call Us Button 

To add a "Call Us" button on the website generated by Button.ai for direct calling functionality following are the steps

  1. Click on the edit icon located at the top of the navigation bar on the website.
  2. Select the edit bar option.
  3. Enable the "Call Us" button by toggling the switch.
  4. Enter the desired text (e.g., "Call Us") and phone number for the button.
  5. Save the changes.


Add Social Media Icons

  • Add social media icons on Header - Click on the edit icon on the menu header of the website generated on butetrnut AI. Select "Edit Navbar" to access the header section. A popup will appear. Choose the social media icons you want to display.Paste the link for each social media icon.Click on "Save Changes" to apply the updates. Preview the website to ensure the icons are working correctly.
  • Add social media icons on Footer -  Click on the Edit icon near the company name in footer. A popup will appear. Choose the social media icons you want to display.Paste the link for each social media icon.Click on "Save Changes" to apply the updates. Preview the website to ensure the icons are working correctly. Save changes and preview the website to verify functionality.


Add Contact US Form

Having a Contact US page or section really helps your users to get in touch with you for queries. On website generated by Butternut AI you can easily add a fully functional contact us forms with just a few click.

  1. Adding Contact US as a Page:
  2. Click on "Add page" on the top of the website editor.
  3. Select the "Contact Us" option from the available options.
  4. Click on "Save Changes" to generate the contact us page.
  5. If you are not satisfied with the layout, click on the "regenerate" icon on the top right corner to change layouts until you are happy with it.
  6. Adding Contact Us as a Section:
  7. Navigate to the home page of the website.
  8. Click on "Add section" in between any two sections where you want to place the contact us form.
  9. Select the "Contact Us Form" option and generate it.
  10. Customize the layout by clicking on the "regenerate" icon until you find a layout you like.
  11. Testing the Form:
  12. The form will start working once you link your domain name and take your website live. 
  13. All the data of the users who fill the Contact Us form will be sent to the email id with which you created a Butternut AI account. 


Add Request a Quote Form

A few businesses require a Request a Quote form on their website. Butternut AI gives the flexibility of adding a custom Request a Quote using just prompts. You can use the following steps to create a custom form - 

  1. Locate the page and section where you want to add the form. In between any two sections you will see a + icon and AI icon. 
  2. Click on the "Build with AI" option.
  3. A new section will be created and it will have a chatbot to which you can give instructions on the request a quote form. Even if you give a simple prompt like “Generate a Request a Quote ”, the AI chatbot will generate a section for you. 
  4. Provide instructions to the AI chatbot to customize the form based on your business needs. For example, add fields like project details or specific service options.
  5. Review the form layout created by the AI chatbot and make any additional changes or edits by providing prompts for modifications.
  6. Once satisfied with the form design, save the changes and take your website live to make the form accessible to users.
  7. Upgrade to the pro plan to view the form data responses on your dashboard.
  8. If further design changes are required, provide prompts to the AI chatbot to update the form layout or appearance.


SEO - View or Change SEO settings like Meta title & Description, Sitemap, robots.txt, GTM Tags

  1. To change SEO settings login to your Butternut AI dashboard. Once you are in your dashboard click on the website you want to edit
  2. Click on Settings button that appears on the website tile
  3. Click on SEO option
  4. Review the existing SEO settings such as robots.txt file, sitemap, and Google verification.
  5. Edit any SEO settings if required, such as adding extra information or customizing metadata.
  6. Save changes.


Google Analytics and Add GTM 

  1. To add Google Analytics, login to your Butternut AI dashboard, once you are in your dashboard click on the website you want to edit
  2. Click on Settings button that appears on the website tile
  3. In the settings, go to Analytics.
  4. Click on the edit icon.
  5. Add the Google Analytics ID (not the entire code) provided by Google Analytics.
  6. Save changes.

Here’s a guide to add Google Analytics to your website - https://support.google.com/analytics/answer/9304153?hl=en