Archisketch Installation Guide

❗️

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.

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.

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

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][email protected])" || `${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

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.

Step_02.

Please remove the Archisketch script from the HTML, then save and deploy the changes.