Website Integration

📘
Prerequisites
You will need CLIENT_ID for integration.

1. Include JavaScript

Include the following script tag before the closing </body> tag.

<!-- For Production: webapp.artisio.co -->
<script src="https://cdn.artisio.co/v1.12.18/js/app.js"></script>

<!-- For Staging: webapp.staging.artisio.co -->
<script src="https://cdn.artisio.co/v1.12.18/staging/js/app.js"></script>

2. Include styles

Web App platform uses Bootstrap 4 for styling. If your website uses Bootstrap 4 as well, there is no need to include the following link tag and the Web App UI will take benefits of your website's Bootstrap CSS file. If you website uses different Bootstrap version or any other CSS framework, include the following link tag on your website.

🚧
All styles are scoped.
All styles the Web App platform uses are scoped for platform elements only. So, don't be afraid of including bootstrap4.css even if your website uses bootstrap 3 or bootstrap 5, there will be no conflict.
But if you are using Bootstrap also, you MUST include your bootstrap CSS file. Because the CSS file bellow won't apply any styles to your website.

<!-- For Production: webapp.artisio.co -->
<link rel="stylesheet" href="https://cdn.artisio.co/v1.12.18/css/bootstrap4.css" ></link>
<link rel="stylesheet" href="https://cdn.artisio.co/v1.12.18/css/app.css"></link>

<!-- For Staging: webapp.staging.artisio.co -->
<link rel="stylesheet" href="https://cdn.artisio.co/v1.12.18/staging/css/bootstrap4.css" ></link>
<link rel="stylesheet" href="https://cdn.artisio.co/v1.12.18/staging/css/app.css"></link>

3. Create HTML element

You need to create an HTML element with id artisioTimedAuctions. That HTML element will be converted into web app platform.

<div id="artisioTimedAuctions"></div>

4. Configuration

There are two ways to configure Web App. 1) Configuration using HTML element 2) Configuration using JavaScript

🚧
Configuration option naming
When specifying configuration options on HTML element you should prefix them with data- and convert camel case version into dashed version. (loginUrl should be specified as data-login-url)
See full example bellow

1) Configuration using HTML element

<div id="artisioTimedAuctions"
     data-client-id="YOUR_CLIENT_ID"
     data-lang="en"
     ....
></div>

2) Configuration using JavaScript

<div id="artisioTimedAuctions"></div>
<script>
    window.artisioWebApp = {
      clientId: "YOUR_CLIENT_ID",
      lang: "en",
      ...
    }
</script>

Full List of Configuration Options

Check the full list of Configuration Options

📘
Every configuration handler functions accepts event as the first argument
So if necessary you can call any available methods on event. Ex: event.preventDefault(), or event.stopPropagation().

Full Example

<div id="artisioTimedAuctions"></div>

<script>
    window.artisioWebApp = {
      clientId: "YOUR_CLIENT_ID",
      lang: "en",
      defaultPage: '/lots',
      loginUrl: "https://example.com/login",
      loginHandler: "loginHandler",
      signupUrl: "https://example.com/signup",
      signupHandler: "signupHandler",
      translationsUrl: "https://example.com/translations.json",
      socialShares: "false",
      printButton: "false",
      showBreadcrumbs: "false",
      jumpToLot: "false",
      showPrevNextList: "false",
      showLatestBids: "false",
      enableWatchlist: "false",
      enableAuth: "false",
      enableBidding: "false",
      enableFilters: "true",
      showCountdown: "false",
      descriptionInSidebar: "true",
      sharesInSidebar: "true"
    }


    function loginHandler(event) {
      console.log(event);
      event.preventDefault();
      alert("Show login form");
    }

    function signupHandler(event) {
      console.log(event);
      alert("Show signup form");
    }

    function printButtonHandler(event) {
      // Do something when print button is clicked
    }

    window.myHandlers = {
      termsHandler(event) {
        console.log(event);
        alert("Show terms");
      },
      biddingInstructions(event) {
        console.log(event);
        alert("Show bidding instructions");
      },
      someAdditionalInfo(event) {
        console.log(event);
        alert("Show some additional info");
      },
    }
  </script>

Webapp API

As soon as the web app is initialized window.artisio object is created. The object contains app property which is as Vue instance.
window.artisio object contains destroy and init methods. That can be useful if you want to destroy the whole web app and reinitialize.

Website Integration