5. 스크립트 삽입하기(Custom)

HTML Script 태그 또는 JavaScript SDK(이하 "SDK")의 초기 설정에 대해 설명합니다.

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

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

설치 순서

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

기업 관리자 계정 신청(생성).
아키스케치 커넥터 연동.
아키스케치 스크립트 삽입.

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

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

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

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

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

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

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

관리자 계정으로 대시보드 로그인 후 연동 체크하기

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

계정 인증하기

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

스크립트 연동하기

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

연동 완료 확인하기

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

커넥터 페이지에서는 연동 완료 페이지가 등장합니다.
대시보드에선 활성화된 스크립트 삽입하기 카드를 볼 수 있습니다.

👍 Script URL

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

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

글로벌 변수 선언하기

아키스케치 모듈이 사용자 데이터를 동기화할 수 있도록, 글로벌 변수(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]archisketch@archisketch.com)" || `${memberId}-email`
  // 또는 fallback data를 이메일 형식에 맞춰주세요.
};

웹사이트 HTML에 스크립트 삽입하기

웹사이트(또는 웹서비스) HTML 코드 속 <head > 태그를 찾아주세요.
<head > 태그 밑 </head > 로 끝나는 부분 위에 아키스케치 설치 스크립트를 복사해 추가해주세요.
또는 아래 예시와 같이 React 환경에 스크립트를 삽입할 수 있습니다.

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

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

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;

적용 확인하기

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

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

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

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

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

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

고객 프로필 정보

데이터

설명

member_id

각 회원을 구분하는 고유 값 (회원 아이디 등)

name

회원 이름

nickname

회원 별명

email

회원 이메일

아키스케치 설치 해제하기

커넥터에서 연동 해제하기

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

HTML에서 스크립트 제거하기

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

이전4.3. 워드프레스: 모델 뷰어 삽입하기(Embed)

마지막 업데이트 13일 전

도움이 되었나요?