My Profile Integration
My Profile section consists of the following pages
#/profile#/invoices#/settlements#/items#/temporary-items#/favorite-lots#/lots-i-made-a-bid
Configure menu items
Add the following classes to your menu items to show/hide them depending on if user is authorized or not.
.ta-visible-for-guest- Elements will be visible for unauthorized users only.ta-visible-for-auth- Elements will be visible for authorized users only
📘 Important!
Showing/hiding of menu items is done using core JavaScript, so it must be included on all pages of the website, even on those pages which does not render web app content.
Full Example:
File: index.html
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
<nav class="navbar main-nav navbar-expand-lg px-2 px-sm-0 py-2 py-lg-0">
<div class="container">
<a class="navbar-brand" href="index.html">
Webapp Staging
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="ti-menu"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home</a>
<!-- Dropdown list -->
</li>
<li class="nav-item">
<a class="nav-link" href="/webapp.html#/private-treaty/lots">Inventory</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="nav-item ta-visible-for-guest" style="display: none;">
<a class="nav-link" href="/webapp.html#/login">Login</a>
</li>
<li class="nav-item ta-visible-for-guest" style="display: none;">
<a class="nav-link" href="/webapp.html#/signup">Signup</a>
</li>
<li class="nav-item dropdown ta-visible-for-auth" style="display: none;">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">My Account
<span><i class="ti-angle-down"></i></span>
</a>
<!-- Dropdown list -->
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/webapp.html#/profile">My Profile</a></li>
<li><a class="dropdown-item" href="/webapp.html#/invoices">Invoices</a></li>
<li><a class="dropdown-item" href="/webapp.html#/settlements">Settlements</a></li>
<li><a class="dropdown-item" href="/webapp.html#/items">My Inventory</a></li>
<li><a class="dropdown-item" href="/webapp.html#/temporary-items">Temporary Items</a></li>
<li><a class="dropdown-item" href="/webapp.html#/sign-out">Logout</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
...
<script>
window.artisioWebApp = {
clientId: "00000001",
lang: "en",
...
}
</script>
<script src="https://cdn.artisio.co/v1.13.6/staging/js/app.js"></script>
</body>
</html>
File: webapp.html - This file must include CSS and web app HTML element as well
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="stylesheet" href="https://cdn.artisio.co/v1.13.6/staging/css/bootstrap4.css" />
<link rel="stylesheet" href="https://cdn.artisio.co/v1.13.6/staging/css/app.css" />
</head>
<body>
<nav class="navbar main-nav navbar-expand-lg px-2 px-sm-0 py-2 py-lg-0">
<div class="container">
<a class="navbar-brand" href="index.html">
Webapp Staging
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="ti-menu"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home</a>
<!-- Dropdown list -->
</li>
<li class="nav-item">
<a class="nav-link" href="/webapp.html#/private-treaty/lots">Inventory</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="nav-item ta-visible-for-guest" style="display: none;">
<a class="nav-link" href="/webapp.html#/login">Login</a>
</li>
<li class="nav-item ta-visible-for-guest" style="display: none;">
<a class="nav-link" href="/webapp.html#/signup">Signup</a>
</li>
<li class="nav-item dropdown ta-visible-for-auth" style="display: none;">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">My Account
<span><i class="ti-angle-down"></i></span>
</a>
<!-- Dropdown list -->
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/webapp.html#/profile">My Profile</a></li>
<li><a class="dropdown-item" href="/webapp.html#/invoices">Invoices</a></li>
<li><a class="dropdown-item" href="/webapp.html#/settlements">Settlements</a></li>
<li><a class="dropdown-item" href="/webapp.html#/items">My Inventory</a></li>
<li><a class="dropdown-item" href="/webapp.html#/temporary-items">Temporary Items</a></li>
<li><a class="dropdown-item" href="/webapp.html#/logout">Logout</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container py-5">
<div id="artisioTimedAuctions"></div>
</div>
<script>
window.artisioWebApp = {
clientId: "00000001",
lang: "en",
...
}
</script>
<script src="https://cdn.artisio.co/v1.13.6/staging/js/app.js"></script>
</body>
</html>