Documentation

Everything you need to know about using the Etch1 visual website editor.

Installation

Getting started with Etch1 is simple. Choose your platform below and follow the specific installation instructions.

Custom Websites

There are two ways to integrate Etch1 with your custom-built website:

JS Snippet

The easiest way to add Etch1 to any website is by adding our JavaScript snippet to your site's <head> tag: 

<script src="https://cdn.etch1.com/editor/latest.js" async></script>
<script>
  window.etch1Config = {
    siteId: "YOUR_SITE_ID",
    // optional configuration options
  };
</script>

Replace YOUR_SITE_ID with the unique identifier you receive when registering your site with Etch1.

NPM Package

For modern JavaScript applications (React, Vue, Angular, etc.), you can install our NPM package: 

bun add @etch1/editor

Then import and initialize it in your application: 

import { initEtch1 } from '@etch1/editor';

initEtch1({
  siteId: 'YOUR_SITE_ID',
  // optional configuration options
});

Integrations

Etch1 integrates seamlessly with popular website platforms and frameworks. Select your platform below for specific instructions.

WordPress

Installing Etch1 on WordPress sites is straightforward:

  1. Log in to your WordPress admin dashboard
  2. Navigate to Plugins → Add New
  3. Search for "Etch1 Visual Editor"
  4. Click "Install Now" and then "Activate"
  5. Go to the Etch1 settings page in your WordPress admin area
  6. Enter your API key from your Etch1 account dashboard
  7. Save changes and you're ready to start editing

Squarespace

To add Etch1 to your Squarespace site:

  1. Log in to your Squarespace account
  2. Go to Settings → Advanced → Code Injection
  3. Add the following code to the Header section:
<script src="https://cdn.etch1.com/editor/latest.js" async></script>
<script>
  window.etch1Config = {
    siteId: "YOUR_SITE_ID",
    platform: "squarespace"
  };
</script>

Replace YOUR_SITE_ID with the unique identifier from your Etch1 dashboard.

Wix

To integrate Etch1 with your Wix website:

  1. Log in to your Wix account and open your site's dashboard
  2. Go to Settings → Custom Code
  3. Click "Add Custom Code"
  4. Name your code (e.g., "Etch1 Integration")
  5. Paste the following code:
<script src="https://cdn.etch1.com/editor/latest.js" async></script>
<script>
  window.etch1Config = {
    siteId: "YOUR_SITE_ID",
    platform: "wix"
  };
</script>

Select "Load once" and "Head" for placement, then click "Apply" and "Save".

Shopify

To add Etch1 to your Shopify store:

  1. Log in to your Shopify admin dashboard
  2. Go to Online Store → Themes → Actions → Edit code
  3. Open the theme.liquid file in the Layout folder
  4. Add the following code just before the closing </head> tag:
<script src="https://cdn.etch1.com/editor/latest.js" async></script>
<script>
  window.etch1Config = {
    siteId: "YOUR_SITE_ID",
    platform: "shopify"
  };
</script>

Save changes and your Shopify store will now be editable with Etch1.

Webflow

To integrate Etch1 with your Webflow site:

  1. Open your Webflow project
  2. Go to Project Settings → Custom Code
  3. Add the following code to the "Head Code" section:
<script src="https://cdn.etch1.com/editor/latest.js" async></script>
<script>
  window.etch1Config = {
    siteId: "YOUR_SITE_ID",
    platform: "webflow"
  };
</script>

Save changes and publish your site. Etch1 will now be available for editing your Webflow site.

Quick Start Guide

Once you've installed Etch1, you can start editing your website content immediately. Here's a quick guide to get you started:

Accessing the Editor

Log in to your Etch1 account and navigate to your website dashboard. Click on "Edit Website" to launch the visual editor.

Making Your First Edit

In the visual editor, simply click on any text element to edit it. You can also drag and drop images, rearrange sections, and more.

Saving and Publishing

Changes are automatically saved as drafts. When you're ready to publish, click the "Publish" button in the top-right corner.

Basic Concepts

Understanding these core concepts will help you make the most of Etch1:

Content Blocks

Your website is made up of content blocks - text, images, buttons, and more. Each block can be edited independently.

Drafts and Publishing

Changes are saved as drafts until you publish them. This allows you to preview changes before making them live.

Version History

Every change is recorded in your version history, allowing you to revert to previous versions if needed.

This documentation is a work in progress. If you can't find what you're looking for, please contact our support team.