아키스케치 설치/연동 방법

❗️

관리자 계정만 연동 진행이 가능합니다.

아키스케치와 연동을 진행하려면 아키스케치 기업 관리자 계정(Admin)이 필요합니다.
관리자 계정이 없는 경우, 연동/설치 절차를 진행 할 수 없습니다.

설치 순서

아키스케치 커스텀 설치/연동 방법은 크게 3단계로 진행됩니다.

--

1️⃣ 기업 관리자 계정 신청(생성).

2️⃣ 아키스케치 커넥터 연동.

3️⃣ 아키스케치 스크립트 삽입.

--

[1️⃣ 기업 관리자 계정 신청(생성)]부터 [3️⃣ 아키스케치 스크립트 삽입]까지 차례대로 절차에 따라 맞춰 연동을 진행해주세요!

• 📋 우측 Table of Contents를 통해 손쉽게 특정 콘텐츠로 이동 할 수 있어요.

1. 기업 관리자 계정 신청(생성)

📘

이미 기업 계정을 가지고 있어요.

이미 기업 관리자 계정을 가지고 계신 분들은 해당 스텝을 넘겨주시면 감사하겠습니다. 🙇‍♂️

아키스케치 기업 서비스 구매자라면 누구나 기업 관리자 계정을 획득 할 수 있어요.

아키스케치 기업 관리자 계정(Admin)은 아키스케치 채널톡 또는 도입문의를 통해 요청하시면 생성 가능합니다.

2. 아키스케치 커넥터 연동

Step_01.

관리자 계정으로 아키스케치 대시보드 로그인 후, [연동] > [스크립트 태그 삽입하기 카드] > [연동 체크하기] 버튼을 클릭하여 커넥터 페이지로 넘어가주세요.

Step_02.

커넥터 페이지의 [연동 시작하기] 버튼을 누르고, 관리자 계정을 입력하여 계정 인증을 진행해주세요.

Step_03.

관리자 계정 로그인 후, 스크립트 연동하기 버튼을 클릭하여, 연동될 스크립트 코드를 활성화시켜주세요.

Step_04.

스크립트 연동이 정상적으로 완료되면,

1️⃣ 커넥터 페이지에서는 연동 완료 페이지가 등장합니다.

2️⃣ 대시보드에선 활성화된 스크립트 삽입하기 카드를 볼 수 있습니다.

👍

Script URL

활성화된 카드 속 Script URL은 추후, 웹사이트 스크립트 삽입 시 활용됩니다.

3. 아키스케치 스크립트 삽입

Step_01.

아키스케치 모듈이 사용자 데이터를 동기화할 수 있도록, 글로벌 변수(as_user)를 먼저 설정해주세요.

• ✅ 변수명은 반드시 as_user로 설정해주세요.
• ✅ memberId, name, nickName, email은 필수 값입니다. 이 값들이 있어야 아키스케치 연동이 가능합니다.
• ✅ memberId는 반드시 고유값(unique)이어야 하며, 나머지 값들이 없을 경우 아래와 같이 기본값으로 설정해주세요.

const as_user = {};

window.as_user = {
  memberId:"유저 ID", // memberId는 "고유"해야 합니다.
  name: "유저 이름" || `${memberId}-name`,
  nickName: "유저 닉네임(별명)" || `${memberId}-nickName`,
  email: "유저 이메일(Ex][email protected])" || `${memberId}-email`
  // 또는 fallback data를 이메일 형식에 맞춰주세요.
};

Step_02.

2-1. 웹사이트(또는 웹서비스) HTML 코드 속 < head > 태그를 찾아주세요.

2-2. < head > 태그 밑 < /head >로 끝나는 부분 위에 아키스케치 설치 스크립트를 복사해 추가해주세요.

2-3. 또는 아래 예시와 같이 React 환경에 스크립트를 삽입할 수 있습니다.

• ✅ scriptUrl 값은 [대시보드 > 연동 페이지 > 스크립트 추가하기 카드]에서 연동 후 획득 할 수 있습니다.
• ✅ scriptUrl 값을 입력하실 때 👉 이모지는 같이 입력하지 않으셔도 됩니다.

HTML 예제

<script>
  var scriptUrl = "👉 이곳에 스크립트 URL을 넣어주세요.";

  (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>

React 예제

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 <div>{"React 아키스케치 모듈 삽입 방법"}</div>;
};

export default ReactScript;

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 <div>{"Typescript로 아키스케치 모듈 삽입 방법"}</div>;
};

export default TypeScriptExample;

Step_03.

1️⃣ 글로벌 변수 선언하기.

2️⃣ 웹사이트 HTML에 < script > 코드 삽입하기.

--

👆 윗 2가지 절차가 모두 정상적으로 진행되었다면, 해당 웹사이트에 아래와 같이 아키스케치 진입 버튼이 등장하는걸 볼 수 있습니다.

• ✅ 설치 후, 인터넷 환경에 따라 버튼 등장시간이 1~2초 걸릴 수 있습니다.

기업이 아키스케치에 제공하는 고객 정보

사용 기업 웹사이트에 방문하는 유저가 아키스케치에 로그인 하거나, 신규 회원이 회원가입할 때 아래의 고객 정보가 아키스케치로 자동 연동됩니다.

고객 프로필 정보

아키스케치 설치 해제하기

Step_01.

아키스케치 관리자 계정으로 아키스케치 대시보드 로그인 후, [연동] > [고도몰 카드] > [연동 체크하기] 버튼을 클릭하여 커넥터로 넘어가주세요. 커넥트 진입 후, 다시 한번 관리자 계정 인증을 하고 [스크립트 연동 해제하기] 버튼을 클릭해주세요.

Step_02.

HTML 속 아키스케치 스크립트를 제거 후 저장 및 배포해주세요.