> For the complete documentation index, see [llms.txt](https://docs.archisketch.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.archisketch.com/guide/dev-kr/builder/custom.md).
# 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에 \