Build a landing page

Ask for the page in plain English. The agent writes it as files in your project folder and opens it in the preview beside the chat. You change it by chatting, and when it's ready you share it: Share, then Publish a copy gives you a public link.

A landing page is a single web page with one job, such as collecting sign-ups or selling one product.

Before you start

• A project. A folder for the page to live in. Starting fresh? Make a new folder for it: see Sessions and projects.
• An AI model connected. Use the connection button under the message box. See Connect an AI model.
• To share it: a free Granular account. You don't need one to build or preview. See Account and sign-in.
• Optional: a starter design from the Library (below).

1. Ask for the page

Start a session in your project and describe the page: who it's for, what it should say, and how it should feel. For example:

Build a landing page for my newsletter about indie design. Dark and modern, with a headline, three reasons to subscribe, and an email sign-up box.

Mention anything you already have: your logo file, your brand colours, the exact headline. You can drag files such as a logo into the chat.

2. What happens

• The agent writes the page as files in your project folder, usually an index.html file plus any images and styles it needs. HTML is the text format web pages are written in.
• You see each step in the chat, and the commands it runs in the terminal.
• When the page exists, the agent opens it in the preview on the right of the session.

If the preview doesn't open, click Preview at the top right of the session. If it says "Nothing to preview yet", click Show the latest work to open the newest page in the folder.

3. Change it by chatting

Say what to change, one or a few things at a time:

• "Make the headline bigger and the button orange."
• "Add a section with three customer quotes."
• "Use a warmer background and more space between sections."
• "Make it look good on a phone."

The agent edits the files and refreshes the preview. If the preview looks unchanged, click Reload preview.

To point at something exactly, take a picture of it:

1. Click the camera button in the preview's toolbar (Screenshot this preview into chat).
2. Choose Full page, Viewport (what's on screen) or Area (drag a box).
3. Draw on it if you like, to circle or mark the part you mean.
4. Click Add to chat, then write what you want changed.

Start from a design in the Library (optional)

The Library has packages the agent builds on, including Launch Page, a landing page starter with a headline section, proof, features and a call to action.

1. Click the book icon near the bottom of the project rail (Library).
2. Check Installing into shows this project.
3. Find Launch Page (or a design system you like) and click Install.
4. Ask for your page as in step 1.

Every session in the project is told to read installed packages and follow their rules, so the page uses that design. Launch Page saves your page in a launch-page folder in your project by default and remembers your brand choices for next time. See Resource library and skills.

Look at it on your computer

The preview shows the page as it is on your computer. Its toolbar has:

• Reload preview, to load the latest version.
• The zoom buttons and full screen, to look closer.
• Open in your default browser, to see it in Safari, Chrome or Edge, or to resize the window to phone width.
• Show this file in Finder (Show this file in File Explorer on Windows), to find the file on your computer.
• The address box, where you can type a file path or a web address.

Nobody else can see this version. To show someone, share it (next step).

4. Share it

Granular has two kinds of link. Which one the Share menu offers depends on what's in the preview.

A simple landing page is a file, so you'll almost always use a published link. See Published links for everything about both.

Publish a copy

1. With the page open in the preview, click the Share button (the link icon, Share this page).
2. Click Publish a copy. On the Free plan it also shows how many free links you have left.
3. Granular asks "Publish a copy of this page? Anyone with the link can see it. You can take it down at any time." and checks the file first:
   • "No passwords or keys found in this file."
   • "Everything it needs is inside it. Nothing links to your machine."
4. Click Publish.
5. Copy the link and send it to anyone.

Granular packs the page's images, styles and scripts into the copy, so it works on its own. Your file on your computer isn't changed.

You can also ask the agent ("publish this page"), or type / in the message box and choose Publish this page.

Update it after changes

A published link is a copy. Changes you make afterwards don't appear on it until you update it.

1. Open the page in the preview and click Share.
2. Click the circular arrow next to the link (Update this link with your latest changes).

Granular says "Updated. Same link, new contents." Anyone who has the link sees the new version.

Take it down

1. Click Share, then More options (the ⋯ next to the link).
2. Click Take it down, then Confirm take-down.

Granular says "Link taken down. The file on your computer is untouched." The link stops working for everyone. You can also do this from Settings → Links, which lists all your links.

Share a live link instead

If the agent built something that runs on your computer (the preview shows a localhost address), the Share menu offers Share live:

1. Click Share, then Share live.
2. Choose how long: 15 min, 30 min, 1 hour or 4 hours.
3. Optionally set a password. Visitors see a password page first.
4. Copy the link and send it.

It ends when the time runs out, when you close the session, or when you click Stop sharing.

Your own domain

Granular can't put a page on your own domain, such as www.yourbrand.com. Published links always use a Granular address.

To use your own domain, the page needs a hosting service, such as the one your domain company offers. The page is ordinary files in your folder, so you can upload it anywhere. You can ask the agent to walk you through it: "Help me put this page on my own domain."

Limits

• One page per link. A published link holds one file. If your page links to other pages on your computer, those don't come along. Ask the agent to keep the landing page to one file, or publish each page separately.
• Size: a published page can be up to 10 MB, with each image up to 1 MB once shrunk.
• Free plan: up to 3 published links and 1 live link at a time. Pro has no limit on published links. See Plans and pricing.
• Sharing needs an account. Building and previewing don't.

Troubleshooting

If the preview is blank or says "Nothing to preview yet", click Show the latest work. If that doesn't find it, ask the agent: "Open the landing page in the preview."

If the preview shows an old version, click Reload preview.

If the page used to open at a localhost address and now doesn't load, the small web server that showed it stopped, for example after Granular restarted. Ask the agent to start it again.

If your published link doesn't show your latest changes, click Share, then the update button. A published link is a copy and doesn't change by itself. Then reload the page in your browser.

If Share doesn't offer Publish a copy, the preview isn't showing a page file. It may be showing a localhost address (use Share live), or a file type that can't be published, such as a PDF or an image.

If you see "One thing this page needs lives on your computer and cannot come along", the page links to a file that wasn't packed in, so it will be missing for everyone else. Ask the agent to fix it, then publish again. Publish anyway publishes without it.

If you see that an image "is too big to fit inside the page and will not show", ask the agent to save the images smaller (a JPEG under 1 MB is plenty).

If you see "This file looks like it contains a secret. Publishing is blocked.", a password or key is in the page. Remove it (keep keys in the Vault for API keys and secrets) and try again. If it's only an example, click Publish with it hidden.

If you see "All 3 free links are in use", take a link you no longer need down in Settings → Links, then publish again. Or upgrade to Pro.

If you see "You already have a link called …", choose Update that link to put this version on the same address, or Make a new link.

If you see "Couldn't reach the publishing server", check your internet connection and try again.

Related