# 1. Getting started with Archisketch App

## Please Check in Advance

{% hint style="warning" %}
❗️ Only Administrator Accounts Can Proceed with Installation

To integrate with Archisketch, an **Archisketch Enterprise Admin Account** is required. If you do not have an admin account, you will not be able to complete the installation process.
{% endhint %}

## Installation Steps

Archisketch Installation Process consists of three main steps:

{% stepper %}
{% step %}

### Request/Create an Enterprise Admin Account

{% hint style="info" %}
📘 Already have an Enterprise Admin Account?

If you already have an **Enterprise Admin Account**, feel free to skip this step. 🙇‍♂️
{% endhint %}

Anyone who has purchased the **Archisketch Enterprise Service** is eligible to obtain an **Enterprise Admin Account**.

If you do not have an **Enterprise Admin Account** (Admin), please create an account through [**Archisketch ChannelTalk**](https://archisketch.channel.io/home) or [**Contact Us**](https://www.archisketch.com/en/enterprisetrial).

![Archisketch integration is a 1:1 integration process between the Cafe24 admin account and the Archisketch admin account.](/files/f177dff701b06ff5e5d749c82e0561f680c8553f)
{% endstep %}

{% step %}

### Integrate Archisketch Connector

**Step\_01.**

Log in to the Archisketch dashboard with an administrator account, then click on **\[Integration] > \[Insert Script Tag Card] > \[Check Connection]** to proceed to the connector page.

![👆 Click on the image to see it larger.](/files/43e4df3ba16f93fac710c644f89d3a91e94483b1)

👆 Clicking on the image allows you to view it in a larger size.

**Step\_02.**

Click the **\[Start Integration]** button on the connector page, enter the **admin account**, and proceed with **account authentication**.

![](/files/02c21b9e481736be02178b326364744d2b2be3ad)

**Step\_03.**

After logging in with the admin account, click the **\[Integrate Script button]** to activate the script code to be integrated.

![](/files/6fe6af5292a2871f56439737c282fdaa5ba78992)

**Step\_04.**

When the script integration is completed successfully:

1. **The integration completion page** will appear on the connector page.
2. **The activated Insert Script Tag card** will be visible on the dashboard.

> 👍 Script URL
>
> The **Script URL** in the activated card will be used later when inserting the script into the website.

![When installation is completed successfully, the installation completion page appears.](/files/9184fb2e4e9c9d81f20f95da638453a2c5aed7e4)

When the script integration is completed successfully, the **integration completion page** will appear.

![When the script linkage is completed properly, the Godomall card is activated.](/files/73d7e003c18d21cfcc0576d42aa5c8bc76ef83ca)

When the script integration is completed successfully, the **script tag card** will become active.
{% endstep %}

{% step %}

### Insert Archisketch Script

**Step\_01.**

To allow the Archisketch module to synchronize user data, please set up the **global variable** (`as_user`) first.

* ✅ The **variable name** must be set as **as\_user**.
* ✅ **memberId**, **name**, **nickName**, and **email** are required for Archisketch integration.
* ✅ The **memberId** must be unique, and if the other values are missing, please set default values as shown below.

```javascript
const as_user = {};

window.as_user = {
  memberId:"User ID", // The memberId must be "unique."
  name: "User name" || `${memberId}-name`,
  nickName: "User nickname(alias)" || `${memberId}-nickName`,
  email: "User e-mail(Ex]archisketch@archisketch.com)" || `${memberId}-email`
  // or Please modify the fallback data to match the email format.
};

```

**Step\_02.**

2-1. Find the **`<head>`** tag in your website (or web service) HTML code.

2-2. Copy the Archisketch installation script and paste it just above the closing **`</head>`** tag.

2-3. Alternatively, you can insert the script in a React environment as shown in the example below:

* ✅ The **scriptUrl** value can be obtained from **\[Dashboard > Integration Page > Insert Script Card]** after integration.
* ✅ When entering the **scriptUrl**, you don't need to include the 👉 **emoji**.

{% tabs %}
{% tab title="HTML" %}

```html

<script>
  var scriptUrl = "👉 Please enter the script URL here.";

  (function() {
    var script = document.createElement("script");
    script.src = scriptUrl;
    script.async = true;
    script.onerror = function() {
      console.error("Failed to load external script.");
    };
    document.head.appendChild(script);
  })();
</script>

```

{% endtab %}

{% tab title="React" %}

```javascript
import React, { useEffect } from "react";

const ReactScript = () => {
  useEffect(() => {
    const scriptUrl = "👉 Please enter the script URL here.";
    
    const script = document.createElement("script");
    script.src = scriptUrl;
    script.async = true;
    script.onerror = () => {
      console.error("Failed to load external script.");
    };
    document.head.appendChild(script);

    return () => {
      document.head.removeChild(script);
    };
  }, []);

  return <div>{"Insert Archisketch module in React"}</div>;
};

export default ReactScript;

```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
import React, { useEffect } from "react";

const TypeScriptExample: React.FC = () => {
  useEffect(() => {
    const scriptUrl = "👉 Please enter the script URL here.";
    
    const script: HTMLScriptElement = document.createElement("script");
    script.src = scriptUrl;
    script.async = true;
    script.onerror = () => {
      console.error("Failed to load external script.");
    };
    document.head.appendChild(script);

    return () => {
      document.head.removeChild(script);
    };
  }, []);

  return <div>{"Insert Archisketch module in React Typescript"}</div>;
};

export default TypeScriptExample;

```

{% endtab %}
{% endtabs %}

**Step\_03.**

**1️⃣ Declare Global Variables**

**2️⃣ Insert `<script>` Code into Website HTML**

👆 If both of the above procedures have been completed correctly, you will see the Archisketch entry button appear on the website as shown below.

* ✅ After installation, it may take 1-2 seconds for the button to appear, depending on the internet environment.

![](/files/c4f3e559b03b5a9e4287315190e310a6a8bca547)
{% endstep %}
{% endstepper %}

## Customer Information Provided to Archisketch

When users visiting the website log in to Archisketch or new members sign up, the following customer information is automatically synchronized with Archisketch.

**User Profile DB**

| Data           | Description                                                |
| -------------- | ---------------------------------------------------------- |
| **member\_id** | A unique identifier for each member (such as a member ID). |
| **name**       | User name                                                  |
| **nickname**   | User nickname                                              |
| **email**      | User e-mail                                                |

## Uninstall Archisketch

**Step\_01.**

Log in to the Archisketch dashboard using an administrator account, then click **\[Integration] > \[Insert Script Card] > \[Check Connection]** to proceed to the connector. Once in the connector, reauthenticate with the administrator account and click the **\[Disconnect Script]** button.

![Delete with the Manage button](/files/2821b332d88ef214fba4547b7563156a22797949)

👆 Clicking on the image allows you to view it in a larger size.

**Step\_02.**

Please remove the **Archisketch script** from the HTML, then save and deploy the changes.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.archisketch.com/dev-guide/en/builder/getting-started.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
