✅ Please Check in Advance

❗️
Only Administrator Accounts Can Proceed with Installation
To integrate with Archisketch, an Archisketch Enterprise Admin Account is required.
If you have not an admin account, you will not be able to complete the installation process.

Installation Steps

Archisketch Installation Process consists of three main steps:

--

1️⃣ Request/Create an Enterprise Admin Account.

2️⃣ Integrate Archisketch Connector.

3️⃣ Insert Archisketch Script.

--

Please follow the steps sequentially from [1️⃣ Request/Create an Enterprise Admin Account] to [3️⃣ Insert Archisketch Script]!

📋 Use the Table of Contents on the right to easily navigate to specific content.

1. Request/Create an Enterprise Admin Account

📘
Already have an Enterprise Admin Account?
If you already have an Enterprise Admin Account, feel free to skip this step. 🙇‍♂️

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 or Contact Us.

Archisketch integration is a 1:1 integration process between the Cafe24 admin account and the Archisketch admin account. — Archisketch integration is a 1:1 integration process between the your service admin and the Archisketch admin account.

2. 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.

👆 이미지를 클릭하면, 크게 볼 수 있습니다. — 👆 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.

Step_03.

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

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 the script integration is completed successfully, the **integration completion page** will appear.

스크립트 연동이 정상적으로 완료되면, **고도몰 카드**가 활성화되요. — When the script integration is completed successfully, the **script tag card** will become active.

3. 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.

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.

Example: 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>

Example: React

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;

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;

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.

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.

관리하기 버튼으로 삭제하기 — 👆 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.