1. Getting started with Archisketch App

Explains the initial setup for the HTML <script> tag or the JavaScript SDK.

Please Check in Advance

❗️ Only Administrator Accounts Can Proceed with Installation

To integrate with Archisketch, an Archisketch Enterprise Admin Account is required. If you do not have an admin account, you will not be able to complete the installation process.

Installation Steps

Archisketch Installation Process consists of three main steps:

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.

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.

👆 Clicking on the image allows you to view it in a larger size.

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:

The integration completion page will appear on the connector page.
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.

When the script integration is completed successfully, the integration completion page will appear.

When the script integration is completed successfully, the script tag card will become active.

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]archisketch@archisketch.com)" || `${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.


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

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

Data

Description

member_id

A unique identifier for each member (such as a member ID).

name

User name

nickname

User nickname

email

User e-mail

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.

👆 Clicking on the image allows you to view it in a larger size.

Step_02.

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

Previous4.3. Model Viewer: Share/Embed Next2. Shopify

Last updated 12 days ago

Was this helpful?