Getting Started

Here are integration details of how you can integration Artisio Webapp into your website.

📘 Prerequisites

You will need CLIENT_ID for integration.

Include JavaScript

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

If you want to do the integration on Artisio's staging (sandbox) environment include the following script

<script src="https://cdn.artisio.co/v1.13.6/staging/js/app.js"></script>

If you want to do the integration on Artisio's production environment include the following script

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

Include styles

Artisio Webapp 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 Artisio Webapp 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.

For Staging (Sandbox) environment

<link rel="stylesheet" href="https://cdn.artisio.co/v1.13.6/staging/css/bootstrap4.css" ></link>
<link rel="stylesheet" href="https://cdn.artisio.co/v1.13.6/staging/css/app.css"></link>

For Production environment

<link rel="stylesheet" href="https://cdn.artisio.co/v1.13.6/css/bootstrap4.css" ></link>
<link rel="stylesheet" href="https://cdn.artisio.co/v1.13.6/css/app.css"></link>

🚧 All styles are scoped.

All styles Artisio Webapp 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.
If your website uses Bootstrap as well, you MUST include your bootstrap CSS file as well, because the CSS file bellow won't apply any styles to your website.

Create HTML element

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

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

Configuration

To apply configuration options you need to define artisioWebapp global JavaScript object before the JS file from CDN is included.

<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: '/auctions',
    loginUrl: "https://example.com/login",
    loginHandler: loginHandler, // Your JavaScript handler global function
    signupUrl: "https://example.com/signup",
    signupHandler: signupHandler, // Your JavaScript handler global function
    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");
  }
</script>

Webapp API

As soon as the Artisio Webapp 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 Artisio Webapp and reinitialize.