# 5. 스크립트 삽입하기(Custom)
{% hint style="warning" %}
❗️ **관리자 계정**만 연동 진행이 가능합니다.
아키스케치와 연동을 진행하려면 **아키스케치 기업 관리자 계정** (Admin)이 필요합니다.\
관리자 계정이 없는 경우, **연동/설치 절차**를 진행 할 수 없습니다.
{% endhint %}
## 설치 순서
**아키스케치 커스텀 설치/연동 방법**은 크게 3단계로 진행됩니다.
1. **기업 관리자 계정 신청(생성).**
2. **아키스케치 커넥터 연동.**
3. **아키스케치 스크립트 삽입.**
**1️⃣ 기업 관리자 계정 신청(생성)**부터 **3️⃣ 아키스케치 스크립트 삽입**까지 차례대로 절차에 따라 맞춰 연동을 진행해주세요!
## 1. 기업 관리자 계정 신청(생성)
{% hint style="info" %}
📘 이미 기업 계정을 가지고 있어요.
이미 **기업 관리자 계정**을 가지고 계신 분들은 **해당 스텝**을 넘겨주시면 감사하겠습니다. 🙇♂️
{% endhint %}
**아키스케치 기업 서비스 구매자**라면 누구나 **기업 관리자 계정**을 획득 할 수 있어요.
**아키스케치 기업 관리자 계정**(Admin)은 [**아키스케치 채널톡**](https://archisketch.channel.io/home) 또는 [**도입문의**](https://www.archisketch.com/kr/enterprisetrial)를 통해 요청하시면 생성 가능합니다.
## 2. 아키스케치 커넥터 연동
{% stepper %}
{% step %}
## 관리자 계정으로 대시보드 로그인 후 연동 체크하기
**관리자 계정**으로 아키스케치 대시보드 로그인 후, **\[연동] > \[스크립트 태그 삽입하기 카드] > \[연동 체크하기]** 버튼을 클릭하여 커넥터 페이지로 넘어가주세요.
{% endstep %}
{% step %}
## 계정 인증하기
커넥터 페이지의 **\[연동 시작하기]** 버튼을 누르고, **관리자 계정**을 입력하여 **계정 인증**을 진행해주세요.
{% endstep %}
{% step %}
## 스크립트 연동하기
관리자 계정 로그인 후, **스크립트 연동하기** 버튼을 클릭하여, 연동될 스크립트 코드를 활성화시켜주세요.
{% endstep %}
{% step %}
## 연동 완료 확인하기
스크립트 연동이 정상적으로 완료되면,
1. 커넥터 페이지에서는 연동 완료 페이지가 등장합니다.
2. 대시보드에선 활성화된 스크립트 삽입하기 카드를 볼 수 있습니다.
{% hint style="info" %}
👍 Script URL
활성화된 카드 속 **Script URL**은 추후, **웹사이트 스크립트 삽입 시** 활용됩니다.
{% endhint %}
{% endstep %}
{% endstepper %}
## 3. 아키스케치 스크립트 삽입
{% stepper %}
{% step %}
## 글로벌 변수 선언하기
아키스케치 모듈이 사용자 데이터를 동기화할 수 있도록, **글로벌 변수(as\_user)**를 먼저 설정해주세요.
* ✅ **변수명**은 반드시 **as\_user**로 설정해주세요.
* ✅ **memberId**, **name**, **nickName**, **email**은 필수 값입니다. 이 값들이 있어야 아키스케치 연동이 가능합니다.
* ✅ **memberId**는 반드시 **고유값**(unique)이어야 하며, **나머지 값들**이 없을 경우 아래와 같이 기본값으로 설정해주세요.
```javascript
const as_user = {};
window.as_user = {
memberId:"유저 ID", // memberId는 "고유"해야 합니다.
name: "유저 이름" || `${memberId}-name`,
nickName: "유저 닉네임(별명)" || `${memberId}-nickName`,
email: "유저 이메일(Ex]archisketch@archisketch.com)" || `${memberId}-email`
// 또는 fallback data를 이메일 형식에 맞춰주세요.
};
```
{% endstep %}
{% step %}
## 웹사이트 HTML에 스크립트 삽입하기
1. **웹사이트(또는 웹서비스) HTML** 코드 속 **\** 태그를 찾아주세요.
2. **\** 태그 밑 **\** 로 끝나는 부분 위에 **아키스케치 설치 스크립트**를 복사해 추가해주세요.
3. 또는 아래 예시와 같이 **React 환경**에 스크립트를 삽입할 수 있습니다.
* ✅ **scriptUrl** 값은 **\[대시보드 > 연동 페이지 > 스크립트 추가하기 카드]**에서 연동 후 획득 할 수 있습니다.
* ✅ **scriptUrl** 값을 입력하실 때 **👉 이모지**는 같이 입력하셔도 됩니다.
{% tabs %}
{% tab title="HTML" %}
```html
```
{% endtab %}
{% tab title="React" %}
```javascript
import React, { useEffect } from "react";
const ReactScript = () => {
useEffect(() => {
const scriptUrl = "👉 이곳에 스크립트 URL을 넣어주세요.";
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 {"React 아키스케치 모듈 삽입 방법"}
;
};
export default ReactScript;
```
{% endtab %}
{% tab title="TypeScript" %}
```typescript
import React, { useEffect } from "react";
const TypeScriptExample: React.FC = () => {
useEffect(() => {
const scriptUrl = "👉 이곳에 스크립트 URL을 넣어주세요.";
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 {"Typescript로 아키스케치 모듈 삽입 방법"}
;
};
export default TypeScriptExample;
```
{% endtab %}
{% endtabs %}
{% endstep %}
{% step %}
## 적용 확인하기
**1️⃣ 글로벌 변수 선언하기.**
**2️⃣ 웹사이트 HTML에< script > 코드 삽입하기.**
윗 **2가지 절차**가 모두 정상적으로 진행되었다면, 해당 웹사이트에 아래와 같이 아키스케치 진입 버튼이 등장하는걸 볼 수 있습니다.
* ✅ 설치 후, 인터넷 환경에 따라 버튼 등장시간이 1\~2초 걸릴 수 있습니다.
{% endstep %}
{% endstepper %}
## 기업이 아키스케치에 제공하는 고객 정보
사용 기업 웹사이트에 방문하는 유저가 아키스케치에 로그인 하거나, 신규 회원이 회원가입할 때 아래의 고객 정보가 아키스케치로 자동 연동됩니다.
**고객 프로필 정보**
| 데이터 | 설명 |
| -------------- | -------------------------- |
| **member\_id** | 각 회원을 구분하는 고유 값 (회원 아이디 등) |
| **name** | 회원 이름 |
| **nickname** | 회원 별명 |
| **email** | 회원 이메일 |
## 아키스케치 설치 해제하기
{% stepper %}
{% step %}
## 커넥터에서 연동 해제하기
아키스케치 관리자 계정으로 아키스케치 대시보드 로그인 후, **\[연동] > \[고도몰 카드] > \[연동 체크하기]** 버튼을 클릭하여 커넥터로 넘어가주세요. 커넥트 진입 후, 다시 한번 관리자 계정 인증을 하고 **\[스크립트 연동 해제하기]** 버튼을 클릭해주세요.
{% endstep %}
{% step %}
## HTML에서 스크립트 제거하기
**HTML** 속 **아키스케치 스크립트**를 제거 후 저장 및 배포해주세요.
{% endstep %}
{% endstepper %}
---
# 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/builder/custom.md?ask=
```
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.