---
title: "Website: common cases"
description: "Your Vivlab site step by step: pages, domain, old site and Google, audience, chat, emails, translation and branding."
url: https://docs.vivlab.com/en/guides/website
---

# Website

Pick your situation.

| Your situation                 | Case                                                                                |
| ------------------------------ | ----------------------------------------------------------------------------------- |
| Your site is empty             | [First pages with Assistant Vivlab](#create-your-first-pages-with-assistant-vivlab) |
| A ready page nobody sees       | [Publish, set the home page](#publish-a-page-and-make-it-the-home-page)             |
| Domain bought at OVH, GoDaddy… | [Connect a domain](#connect-a-domain-bought-elsewhere)                              |
| No domain yet                  | [Buy a domain](#buy-your-domain-from-vivlab)                                        |
| You are replacing an old site  | [Keep your rankings](#leave-an-old-site-without-losing-google)                      |
| Nobody finds you on Google     | [Better visibility on Google](#get-better-visibility-on-google)                     |
| Measure visits and ads         | [Analytics and Meta pixel](#install-google-analytics-and-the-meta-pixel)            |
| Cookie banner required         | [Cookie banner](#show-a-cookie-banner)                                              |
| Chat live with customers       | [Live chat](#add-a-live-chat)                                                       |
| Newsletter subscribers         | [Signup pop-up](#collect-emails-with-a-pop-up)                                      |
| Receive quote requests         | [Contact form](#receive-messages-from-a-contact-form)                               |
| Customers from abroad          | [Translate the site](#translate-the-site-into-english)                              |
| New brand guidelines           | [Colors, fonts, logo](#change-the-colors-fonts-and-logo)                            |
| A dead-end error page          | [404 page](#customize-the-404-page)                                                 |

## Create your first pages with Assistant Vivlab {#create-your-first-pages-with-assistant-vivlab}

**Example**: a florist wants a home page, an "Our bouquets" page and a contact page.

<DocsSteps>

1. In **Website > Pages**, click **Create a page**, then **Generate with the Vivlab assistant**.
2. Write: "Florist in Lyon, seasonal bouquets and weddings. Create a home, an Our bouquets and a Contact page with a form, warm tone." Attach two shop photos.
3. Wait 2 to 3 minutes with the tab open, then ask for changes ("home title: Seasonal flowers, delivered in Lyon").
4. Click **Save**, keep the three pages ticked in **Save the pages** and confirm.

</DocsSteps>

**Result**: three inactive pages in your theme's colors; the first opens in the editor. Or start from a template (**Use a template**, filter by business, **Use this template**) or paste an old page's address in the chat to reproduce it.

Learn more: [Pages](https://docs.vivlab.com/en/sections/pages.md#create-a-page-with-assistant-vivlab).

## Publish a page and make it the home page

**Example**: the generated "Home" page must show on `lyon-flowers.com`.

<DocsSteps>

1. In the editor, click an empty area (**Page** panel) and turn on **Make the page visible** and **Set as home page**.
2. Click **Refresh the page**, check the desktop and mobile preview, click **Continue**, then **Publish**.
3. Repeat for the other pages (without the home setting), then add them to the menu with the top bar's [Navigation](https://docs.vivlab.com/en/editor/menu/navigation.md) element.

</DocsSteps>

**Result**: the home page shows at the main address, the rest through the menu. To take a page down: turn off **Make the page visible**, then **Unpublish**. Without a subscription, the site is limited to one web page on the vivlabsite.com address.

Learn more: [Pages](https://docs.vivlab.com/en/sections/pages.md#put-a-page-online).

## Connect a domain bought elsewhere

**Example**: `lyon-flowers.com` bought at OVH, keeping `contact@lyon-flowers.com`.

<DocsSteps>

1. In **Website > Domain name**, click **Add a domain name**, **Connect an existing domain**, **Continue**, enter `lyon-flowers.com` (without `www`) and confirm with **Add a domain name**.
2. In the domain's **DNS zone** at OVH (or GoDaddy, IONOS…), add an `A` (name `@`, value `15.188.109.135`) and a `CNAME` (name `www`, value `lyon-flowers.com`).
3. Remove the `AAAA` on `@` and `www` and any other `A` or `CNAME` marked **To delete**. Leave the `MX` alone (your email).
4. On Vivlab, click **Next** and wait for **Your domain name is connected.**

</DocsSteps>

**Result**: usually within 10 to 15 minutes (48 hours max), the site shows over HTTPS on `lyon-flowers.com` and `www.lyon-flowers.com`. Your email stays at OVH.

Learn more: [Domain name](https://docs.vivlab.com/en/sections/domains.md#dns-records-to-configure).

## Buy your domain from Vivlab

**Example**: you want `ceramic-studio.com`, paid for 2 years.

<DocsSteps>

1. In **Website > Domain name**, click **Add a domain name**, **Buy a new domain**, then **Continue**.
2. Search for `ceramic-studio.com`, click it if **Available** (otherwise in **Other available domains**), then **Next**.
3. Fill in the **Owner** (you or your company), pick a **Registration length** of 2 years, check the card, tick the confirmation and click **Buy the domain**.

</DocsSteps>

**Result**: minutes after payment, the domain is connected and secured, with no DNS setup. It renews automatically, after a warning email about 90 days before.

Learn more: [Domain name](https://docs.vivlab.com/en/sections/domains.md#buy-a-domain-name).

## Leave an old site without losing Google

**Example**: the old WordPress `lyon-flowers.com` ranked well with `/wedding-bouquets/` and `/contact.html`, which become `/weddings` and `/contact`.

<DocsSteps>

1. Rebuild your pages ([Assistant Vivlab](https://docs.vivlab.com/en/sections/pages.md#create-a-page-with-assistant-vivlab) reproduces an old page whose address you paste).
2. List the old addresses that get visits (the old site's Search Console or sitemap).
3. In **Website > Redirects**, add one **301 · Permanent** rule per address: `/wedding-bouquets/` to `/weddings`, `/contact.html` to `/contact`, plus the version without the trailing slash (`/wedding-bouquets`) if the old site used them. Save.
4. Publish your pages, [connect the domain](#connect-a-domain-bought-elsewhere), then Search Console in **SEO**, and test a few old addresses.

</DocsSteps>

**Result**: links from Google and elsewhere reach your new pages, which keep the earned ranking. No catch-all rule (`/blog/*`) and no file import: one rule per address, with an active subscription.

Learn more: [Redirects](https://docs.vivlab.com/en/sections/redirects.md#keep-your-rankings-when-leaving-an-old-site).

## Get better visibility on Google

**Example**: live for a month, `lyon-flowers.com` doesn't rank for "florist Lyon wedding".

<DocsSteps>

1. Connect a custom domain: Google doesn't index the vivlabsite.com address.
2. In **Website > SEO**, **Connect my Google account** then **Set up automatically** (site verified, sitemap submitted). In **Page title format**, enter "Lyon Flowers" as **Brand name** and save.
3. In the **Page** panel of each important page, write the **Page title** and **SEO description of the page** with your keywords (or **Generate with the Vivlab assistant**), then publish.
4. In **SEO audit**, click **Run the audit**, then fix the **Fix this first** point of each page first.

</DocsSteps>

**Result**: Google knows your pages. The Search Console card shows clicks and queries after a few days.

Learn more: [SEO](https://docs.vivlab.com/en/sections/seo.md) and [SEO audit](https://docs.vivlab.com/en/sections/seo-audit.md).

## Install Google Analytics and the Meta pixel

**Example**: track visits and purchases from your Instagram ads.

<DocsSteps>

1. Copy the `G-XXXXXXXXXX` measurement ID of a Google Analytics **Web** stream, and the ID of the pixel created in Meta Events Manager (**Connect data sources**, **Web**).
2. In **Website > Marketing extensions**, click **Configure** on **Google Analytics 4**, paste the ID and **Validate**. Same on **Facebook Pixel**.
3. Click **Save** at the top of the page.

</DocsSteps>

**Result**: both rows switch to **Active**; a cookie banner shows and the tools load after **OK pour moi**. To test the pixel, accept cookies on your site, then watch Meta's **Test events** tab.

Learn more: [Marketing extensions](https://docs.vivlab.com/en/sections/plugins.md#google-analytics-4).

## Show a cookie banner

**Example**: consent before ad tracking. Nothing to turn on: the banner shows as soon as Google Analytics 4, Google Tag Manager or the Facebook Pixel is active in the [Marketing extensions](https://docs.vivlab.com/en/sections/plugins.md#cookie-banner).

<DocsSteps>

1. Set up tracking tools in **Marketing extensions**, not **Codes**.
2. Open the site in a private window to see it.

</DocsSteps>

**Result**: the banner offers **Non merci** (no thanks) and **OK pour moi** (fine by me); the three tools wait for consent. Its text is fixed, in French. Scripts in **Codes** ignore it: for a custom banner or full consent manager, install a specialized service with a [code](https://docs.vivlab.com/en/sections/codes.md) and manage your tools there.

Learn more: [Marketing extensions](https://docs.vivlab.com/en/sections/plugins.md#cookie-banner).

## Add a live chat

**Example**: the Crisp bubble on every page. Chat has no row in the marketing extensions: use **Codes**.

<DocsSteps>

1. In Crisp (or Tawk.to, Tidio…), copy the full `<script>` install tag.
2. In **Website > Codes**, click **Create a code** and name it "Crisp chat".
3. Choose the **JavaScript** **Code type** and the **In the head tag** location, paste the code and save.

</DocsSteps>

**Result**: the bubble shows everywhere. To pause it, disable the code.

Learn more: [Codes](https://docs.vivlab.com/en/sections/codes.md#add-a-chat-widget-or-a-third-party-script).

## Collect emails with a pop-up

**Example**: 10% off for a newsletter signup, at most once a week per visitor.

<DocsSteps>

1. Create the code in [Store > Coupons](https://docs.vivlab.com/en/sections/coupons.md).
2. In **Website > Pop-up**, click **Create a pop-up**, **Use a template**, **Newsletter** category, **Use this template**. Keep the [form](https://docs.vivlab.com/en/editor/menu/form.md) and write "10% off your first order".
3. In the **Pop-up** panel: **Whole site** target, **After a delay** trigger of 10 seconds, **Every X days** frequency set to 7. Click **Publish the pop-up**.

</DocsSteps>

**Result**: signups land in **Website > Contacts** and by email. Vivlab sends neither newsletters nor the code: reply with the code, or export the addresses (**More actions > Export to CSV file**) to your emailing tool.

Learn more: [Pop-up](https://docs.vivlab.com/en/sections/popups.md#create-a-newsletter-signup-pop-up).

## Receive messages from a contact form

**Example**: quote requests with name, phone and a description of the work.

<DocsSteps>

1. In the editor, add a [Form](https://docs.vivlab.com/en/editor/menu/form.md) element to the **Contact** page.
2. Keep name, email, phone, add "Describe your project" and publish.

</DocsSteps>

**Result**: each request is emailed to your account address (replies go to the customer) and stays in **Website > Contacts** with its source page; **Reply** opens a pre-filled email. To stop the email without losing messages, turn off **Your site's forms** in the [Notifications](https://docs.vivlab.com/en/sections/preferences.md#your-site-s-forms) pane of your settings.

Learn more: [Contacts](https://docs.vivlab.com/en/sections/contacts.md).

## Translate the site into English

**Example**: an English version, without translating the name "Maison Lillet".

<DocsSteps>

1. In **Website > Translations**, click **Get started** and add "English" in **Add a language**.
2. In **Custom terminologies**, **Add a terminology**: "Maison Lillet" in every column. Save and confirm.
3. In the editor, add the **Language menu** element to the navigation bar and publish.

</DocsSteps>

**Result**: within 24 hours, pages, products, articles and emails are translated on `/en`, as is each new publication. Translation is automatic: you enforce terms, but can't edit a translated text. The number of languages depends on your plan.

Learn more: [Translations](https://docs.vivlab.com/en/sections/translations.md).

## Change the colors, fonts and logo

**Example**: new guidelines in forest green `#1F4D3A`, Playfair for headings, a new logo.

<DocsSteps>

1. In **Website > Themes**, open **Logo, colors and fonts**. In **Identity**, upload the logo in **Default logo**; in **Colors**, set the **Accent color** to `#1F4D3A`.
2. Still in **Colors**, add `#1F4D3A` to the **Color palette**, then in **Typography** pick Playfair for **Heading** and **Subheading**. Click **Save**.
3. Go back to **Themes** and hover the thumbnails to check your pages.

</DocsSteps>

**Result**: the logo, call-to-action buttons, links and headings that follow the theme change everywhere; colors set on a specific element are edited in the editor.

Learn more: [Logo, colors and fonts](https://docs.vivlab.com/en/sections/themes-brands.md).

## Customize the 404 page

**Example**: an error page in your tone, with photo and product search.

<DocsSteps>

1. In **Website > Themes**, open **Page not found (404)**, click the background, then in **Templates** click **Change**: pick **With search** and confirm with **Replace**.
2. Replace the **Title** with "This bouquet has wilted" and the **Text** with your message, and add an image.
3. Click **Publish layout**.

</DocsSteps>

**Result**: a broken link leads to your page, with menu, footer, home link and catalog search. For a known old address, prefer a [redirect](https://docs.vivlab.com/en/sections/redirects.md).

Learn more: [Missing pages](https://docs.vivlab.com/en/sections/themes-not-found.md), with a text of their own for missing products, categories and articles.