Webflow handoff - Your Artivive Account

Webflow -> Project Settings -> Custom Code -> Head Code. Only needed once for the whole site.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap" rel="stylesheet">

2 - Paste the embed

Drop a Webflow Embed element into the page content area and paste everything below. CSS is scoped under .av-kb so it cannot affect the site nav/footer.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
.av-kb{--ink:#111111; --bg:#f7f7f7; --white:#ffffff; --line:#e6e4e1;
  --muted:#666666; --muted-2:#888888;
  --pink:#dda6c2; --blue:#5fa2c9; --link:#0970b9;
  --grad:linear-gradient(120deg,#dda6c2 0%,#5fa2c9 100%);
  --acc-hover:#4a4644;}
.av-kb *{box-sizing:border-box}
.av-kb{scroll-behavior:smooth}
.av-kb{margin:0;font-family:Montserrat,sans-serif;color:var(--ink);background:var(--bg);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
.av-kb a{color:inherit}
.av-kb .wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.av-kb .gt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.av-kb .topbar{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.av-kb .topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.av-kb .brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.02em;font-size:20px;text-decoration:none}
.av-kb .brand .dot{width:20px;height:20px;border-radius:5px;background:var(--grad)}
.av-kb .navlinks{display:flex;gap:26px;align-items:center}
.av-kb .navlinks a{text-decoration:none;font-weight:500;font-size:14px;color:#333}
.av-kb .navlinks a:hover{color:var(--ink)}
.av-kb .btn{display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;
  text-decoration:none;border-radius:8px;padding:10px 20px;cursor:pointer;transition:.15s;
  background:var(--blue);color:#fff;border:1px solid var(--blue)}
.av-kb .btn:hover{background:var(--acc-hover);border-color:var(--acc-hover)}
.av-kb .btn-grad{background:var(--grad);border:none;color:#fff}
.av-kb .btn-grad:hover{filter:brightness(.96);background:var(--grad)}
@media(max-width:900px){.av-kb .navlinks{display:none}}
.av-kb .kb-hero{background:#fff;border-bottom:1px solid var(--line)}
.av-kb .kb-hero .wrap{padding:40px 24px 34px}
.av-kb .breadcrumb{font-size:13px;color:var(--muted);font-weight:500;margin-bottom:14px}
.av-kb .breadcrumb a{text-decoration:none;color:var(--muted)}
.av-kb .breadcrumb a:hover{color:var(--ink)}
.av-kb .kb-hero h1{margin:0;font-size:38px;line-height:1.12;font-weight:800;letter-spacing:-.02em}
.av-kb .kb-hero .lede{margin:14px 0 0;max-width:620px;color:var(--muted);font-size:17px}
.av-kb .kb-hero .accent-bar{width:64px;height:4px;border-radius:4px;background:var(--grad);margin-top:20px}
.av-kb .layout{display:grid;grid-template-columns:250px 1fr;gap:56px;padding:40px 24px 90px;max-width:1160px;margin:0 auto}
@media(max-width:900px){.av-kb .layout{grid-template-columns:1fr;gap:24px}}
.av-kb .sidebar{position:sticky;top:88px;align-self:start;max-height:calc(100vh - 108px);overflow:auto;padding-right:6px}
.av-kb .cat{font-size:12px;text-transform:uppercase;letter-spacing:.07em;font-weight:700;color:var(--muted-2);margin:24px 0 6px}
.av-kb .cat:first-child{margin-top:0}
.av-kb .sidebar ul{list-style:none;margin:0;padding:0}
.av-kb .sidebar li a{position:relative;display:block;text-decoration:none;color:#444;font-size:14px;font-weight:500;
  padding:6px 12px;border-radius:6px;line-height:1.35}
.av-kb .sidebar li a:hover{color:var(--ink);background:#efefef}
.av-kb .sidebar li a.active{color:var(--ink);font-weight:600;background:linear-gradient(90deg,rgba(221,166,194,.16),rgba(95,162,201,.10))}
.av-kb .sidebar li a.active::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:3px;background:var(--grad)}
@media(max-width:900px){.av-kb .sidebar{position:static;max-height:none;border:1px solid var(--line);
  border-radius:10px;background:#fff;padding:18px}}
.av-kb .article{max-width:720px}
.av-kb .article section{padding:0 0 30px;margin-bottom:30px;border-bottom:1px solid var(--line)}
.av-kb .article section:last-child{border-bottom:none;margin-bottom:0}
.av-kb .article h2{font-size:22px;font-weight:700;margin:0 0 10px;letter-spacing:-.01em}
.av-kb .article h2 .num{font-weight:800;margin-right:8px}
.av-kb .article p{margin:12px 0;color:#2c2c2c}
.av-kb .article ul.plans{list-style:none;padding:0;margin:14px 0}
.av-kb .article ul.plans li{display:flex;justify-content:space-between;gap:16px;padding:12px 2px;border-bottom:1px solid var(--line)}
.av-kb .article ul.plans li:last-child{border-bottom:none}
.av-kb .article ul.plans li b{font-weight:700}
.av-kb .article ul.plans li span{color:var(--muted);font-size:14.5px;text-align:right}
.av-kb .inline-cta{margin-top:18px}
.av-kb .note{position:relative;border:1px solid var(--line);background:#fbfbfb;border-radius:8px;
  padding:16px 18px 16px 22px;margin:18px 0 0;overflow:hidden}
.av-kb .note::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad)}
.av-kb .note b{display:block;margin-bottom:4px}
.av-kb .acct-list{margin:10px 0 0;padding:0;list-style:none}
.av-kb .acct-list li{padding:6px 0;color:#2c2c2c}
.av-kb .acct-list li b{color:var(--ink)}
.av-kb a.tlink{color:var(--link);text-decoration:none;font-weight:600}
.av-kb a.tlink:hover{text-decoration:underline}
.av-kb footer.site{background:var(--ink);color:#cfcfcf}
.av-kb footer.site .wrap{padding:44px 24px 26px;display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between}
.av-kb footer.site a{color:#cfcfcf;text-decoration:none;font-size:14px;display:block;margin:6px 0}
.av-kb footer.site a:hover{color:#fff}
.av-kb footer.site h4{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.07em;margin:0 0 10px}
.av-kb footer.site .cols{display:flex;gap:56px;flex-wrap:wrap}
.av-kb footer.site .legal{border-top:1px solid #2a2a2a}
.av-kb footer.site .legal .wrap{padding:16px 24px;font-size:13px;color:#8a8a8a}
</style>
<div class="av-kb">
<div class="kb-hero">
  <div class="wrap">
    <div class="breadcrumb"><a href="https://www.artivive.com/resources">Knowledge Base</a> &nbsp;/&nbsp; Getting Started</div>
    <h1>Your Artivive <span class="gt">Account</span></h1>
    <p class="lede">Set up your account, choose the plan that fits your work, and start bringing your art to life in augmented reality.</p>
    <div class="accent-bar"></div>
  </div>
</div>

<div class="layout">

  <aside class="sidebar">
    <div class="cat">Getting Started</div>
    <ul>
      <li><a class="active" href="https://www.artivive.com/resources/your-artivive-account">Your Artivive Account</a></li>
      <li><a href="https://www.artivive.com/resources/create-your-first-ar-artwork">Create Your First AR Artwork</a></li>
      <li><a href="https://www.artivive.com/resources/artivive-features">Discover Artivive Features</a></li>
      <li><a href="https://www.artivive.com/resources/buying-additional-views">Artivive Views Explained</a></li>
      <li><a href="https://www.artivive.com/resources/viewing-ar-experiences">How to View AR Experiences</a></li>
    </ul>

    <div class="cat">FAQs</div>
    <ul>
      <li><a href="https://www.artivive.com/resources/artivive-creator-account">Artivive Creator Account</a></li>
      <li><a href="https://www.artivive.com/resources/create-art">How to create AR experiences?</a></li>
      <li><a href="https://www.artivive.com/resources/viewing-augmented-reality-art">How to view AR experiences?</a></li>
      <li><a href="https://www.artivive.com/resources/duplicates-issue">Duplicate Artwork</a></li>
      <li><a href="https://www.artivive.com/resources/file-types">File Types</a></li>
      <li><a href="https://www.artivive.com/resources/problem-solving">Problem Solving</a></li>
      <li><a href="https://www.artivive.com/resources/how-do-i-downgrade-or-cancel-my-account">Downgrade or Cancel My Account</a></li>
    </ul>

    <div class="cat">Tutorials</div>
    <ul>
      <li><a href="https://www.artivive.com/resources/youtube-tutorials">Artivive Tutorials</a></li>
      <li><a href="https://www.artivive.com/resources/how-to-optimize-image-recognition">Optimize Image Recognition</a></li>
      <li><a href="https://www.artivive.com/resources/3d-objects">3D Objects</a></li>
      <li><a href="https://www.artivive.com/resources/how-do-i-use-webar">How do I use WebAR?</a></li>
      <li><a href="https://www.artivive.com/resources/discover-timeline">Discover Timeline</a></li>
      <li><a href="https://www.artivive.com/resources/discover-sequences">Discover Sequences</a></li>
      <li><a href="https://www.artivive.com/resources/steps-to-launch-your-fully-branded-ar-experience">Fully Branded AR Experience</a></li>
    </ul>

    <div class="cat">Downloads</div>
    <ul>
      <li><a href="https://www.artivive.com/resources/introduction">Introduction</a></li>
      <li><a href="https://www.artivive.com/resources/templates">Gallery Templates</a></li>
      <li><a href="https://www.artivive.com/resources/museum-templates">Museum Templates</a></li>
      <li><a href="https://www.artivive.com/resources/publications-templates">Publications Templates</a></li>
      <li><a href="https://www.artivive.com/resources/qr-code">QR Code</a></li>
    </ul>

    <div class="cat">Artivive Community</div>
    <ul>
      <li><a href="https://www.artivive.com/resources/get-in-touch">Get in Touch</a></li>
      <li><a href="https://www.artivive.com/resources/join-the-community">Join the Community</a></li>
      <li><a href="https://www.artivive.com/resources/get-featured">Get Featured</a></li>
      <li><a href="https://www.artivive.com/resources/how-to-redeem-the-coupon-code">Redeem a Coupon Code</a></li>
    </ul>
  </aside>

  <main class="article">

    <section>
      <h2><span class="num gt">1.</span>Create your account</h2>
      <p>Sign up for a free Artivive Creator Account using your email or a social login (Google, Apple, Facebook, or Clever). If you register with an email address, you'll receive an activation email, click the link to activate your account, sign in to the Artivive Editor (Bridge), and start creating.</p>
      <div class="inline-cta"><a class="btn btn-grad" href="https://www.artivive.com/register">Create your free account</a></div>
      <div class="note">
        <b>Just want to view AR?</b>
        You don't need an account to experience augmented reality. Anyone can scan and view artworks for free with the Artivive app or through WebAR in a browser. An account is only needed if you want to create AR.
      </div>
    </section>

    <section>
      <h2><span class="num gt">2.</span>Choose your plan</h2>
      <p>Artivive uses a freemium model, so you can start for free and upgrade anytime as your needs grow. Your free basic account includes access to the Editor (Bridge) and 50 lifetime views to preview your creations. When you're ready to share your work with a wider audience, these plans are available:</p>
      <ul class="plans">
        <li><b>Pro</b><span>1,000 views / month</span></li>
        <li><b>Pro Plus</b><span>5,000 views / month, plus WebAR &amp; Timeline</span></li>
        <li><b>Business</b><span>Higher volume and collaboration for teams &amp; organisations</span></li>
        <li><b>Enterprise</b><span>Unlimited scale and a 100% white-label, fully branded AR experience</span></li>
      </ul>
      <p>Opting for annual billing saves you more than 35% compared to monthly pricing. For full details and current prices on every plan, including Business and Enterprise, visit our <a class="tlink" href="https://www.artivive.com/pricing">pricing page</a>.</p>
      <div class="note">
        <b>Creator, Educational or Business?</b>
        <ul class="acct-list">
          <li><b>Creator</b> - for individual artists and creatives (Free, Pro, Pro Plus).</li>
          <li><b>Educational</b> - discounted bundles for schools and universities, from 10 accounts.</li>
          <li><b>Business &amp; Enterprise</b> - tailored plans and fully branded AR for companies and institutions.</li>
        </ul>
        <p style="margin:10px 0 0">Not sure which fits? <a class="tlink" href="https://www.artivive.com/resources/get-in-touch">Get in touch</a> and we'll help.</p>
      </div>
    </section>

    <section>
      <h2><span class="num gt">3.</span>Start using your account</h2>
      <p>Once you're set up, you're ready to create AR experiences. New to Artivive? Follow our step-by-step guide to <a class="tlink" href="https://www.artivive.com/resources/create-your-first-ar-artwork">create your first AR artwork</a>.</p>
      <p>Want to learn more? Explore <a class="tlink" href="https://www.artivive.com/resources/artivive-features">Artivive's features</a> or browse our <a class="tlink" href="https://www.artivive.com/resources">FAQs</a>.</p>
    </section>

  </main>
</div>
</div>

3 - Page SEO settings

Title: Your Artivive Account - Knowledge Base | Artivive
Description: Set up your Artivive account, choose the plan that fits your creative work, and start creating augmented reality.

Note on the sidebar

This embed includes a hardcoded KB sidebar. If your Resources template already renders a dynamic (CMS-driven) sidebar, either keep yours and I will give you a body-only version (article + intro, no sidebar), or use this one and we update the links by hand. Tell me which you prefer.

Webflow handoff - Your Artivive Account

1 - Add the fonts once (site-wide)

2 - Paste the embed

3 - Page SEO settings

Note on the sidebar