1. Introduction
The Admin Panel is a dedicated module for cross-platform integration with applications to add, modify and manage and delete their content, and includes the ability to supervise those authorized to make such changes. Once the Administration Panel is connected to the applications, the configurations entered are passed through the API on an ongoing basis for application.
How does the Admin Panel work?
The administration panel allows the User to manage:
- new and existing products and their variants;
- new and existing users;
- AR-Labs.io solution configurations.
The panel allows to customize the content for your project, and managing the content is easy and intuitive.
2. Logging into the admin panel
Logging into the admin panel can be done, depending on the configuration, through integration with the Google Access service. As a result, there is no need to enter the User’s password - only an email address is sufficient.
To log out of the administration panel, click (in the upper right corner of the page) on the SING OUT button.
3. Menu
After logging into the administration panel, you can see the menu on the left side, which includes the following tabs:
- Dashboard
- Products
- Marketplace
- Categories
- Tags
- Click Fit Web
- Brands
- Push notifications
- Totems
- Users
- Settings
Some of the tabs are optional, and they include:
- Dashboard - only if the User has access to the statistics of activities in the application,
- Marketplace - only in case the User has the function of adding products from the marketplace enabled,
- Categories - only if the User has the function to add product categories enabled,
- Click Fit Web - only if the User has the function to try on products in the web application enabled,
- Push Notifications - only if the User has the push notification sending function enabled,
- Totems - only if the User has the product try-on function enabled in the totem application.
4. Dashboard
The DASHBOARD tab contains statistics related to activities in the application, such as:
- App openings - a graph showing how many times the app was launched on each day (broken down by iOS and Android)
- Product try-ons - a graph showing how many products were tried on by app users on each day (split between iOS and Android)
- 3D Scene Product Preview - a graph showing how many products on each day were viewed by users using 3D view (split between iOS and Android)
- Most popular products - a list of the most popular products (products are selected in terms of how often they are tried on by app users)
- Product searches by name - a graph showing how many times on each day users searched for products by typing in the product name (split between iOS and Android)
- Photos taken in the app - a graph showing how many times on each day app users took a photo using the app’s camera function (split between iOS and Android)
- App openings via push notification - a graph showing how many times app users opened the app via push notification on each day (broken down by iOS and Android)
- Product views in web application - a graph showing how many times users tried on products in the web application on a given day
5. Products
When you click on the PRODUCTS tab, fields appear on the screen that allow you to search for models by: name, category (optional), status and marketplace (optional).
Standard menu view:
Appearance with category selection enabled:
Appearance with the option to select products from the marketplace disabled:
Enter the name of the model you are looking for in the field (accepts any string).
After clicking on the list, we have the option of selecting a specific category or all categories (only possible with the category option enabled).
After clicking on the list, we have the option to select the specific status of a particular model (published/unpublished) or all of them.
After completing all fields, click SEARCH or Enter. To delete the contents of all fields, click CLEAR.
After clicking the SEARCH button, a list of models that are added to the panel under the search name should appear on the screen. The list includes the ordinal number, thumbnail of the model, its name, category, number of published versions of the model and the ACTIONS button (as below, in this case the search was for an eyeglasses model).
Adding new products
To add a new product to the panel, click the ADD button. When you click it, a form opens that allows you to add information about the model and its variants.
The first option of the form is a button that allows you to publish the model in applications (mobile and totems).
The button that publishes versions of a given model in the application and totem is located below the model editing option, under the Version heading.
The next field is Name. It allows you to add the model name (it accepts any string).
Under the name field there is a list named Brand. After expanding the list, we can select the brand name of a particular model.
The Category list allows us to add a specific category to the model. Once expanded, we can select a category from the list (this field is only visible if category selection is enabled).
Another fields are Model File (OBJ) and Model File (FBX). They allow you to add a model file by dragging the file in the field area or by clicking in the field and selecting it. OBJ and FBX indicate with which extension the file is to be added. The recommended model format is .fbx. Import of .obj formats will be deprecated.
If the file has been added appropriate, you will see the message ‘The file is in the database.’
The Tags list, allows you to add a tag (keywords, allowing you to group products with similar characteristics) to the selected model. This field is completed by selecting from the drop-down list of keywords on it.
Under the model editing options, you will find the model settings in iOS and Android, as well as in the browser (the model settings in the browser are available only when the User has the virtual fitting room option enabled in the browser).
- Model settings on iOS
To see the model’s setting options, click on the arrowhead; when clicked, the setting options will expand in the form of four sliders.
These settings are used to adjust the size and position of the model in the application.
Operation of the individual sliders:
-
Scale iOS - is used to decrease (move the slider to the left) or increase (move the slider to the right) the model. The scale takes values from 0.5 to 2.
-
Top-down iOS position - is used to change the position of the model - up (move the slider to the right) or down (move the slider to the left). The scale takes values from -1 to 1.
-
Forward-backward position iOS - is used to change the position of the model - forward (move the slider to the left ) or backward (move the slider to the right). The scale takes values from -1 to 1.
-
Rotation iOS - used to change the tilt of the model - tilt up (move the slider to the left) or tilt down (move the slider to the right). Scale taking values from -10 to 10.
- Model settings on Android
To see the model’s setting options, click on the arrowhead; when clicked, the setting options will expand in the form of four sliders.
These settings are used to adjust the size and position of the model in the application.
Operation of the individual sliders:
-
Android scale - is used to decrease (move the slider to the left) or increase (move the slider to the right) the model. The scale takes values from 0.5 to 2.
-
The position of the top-down Android - is used to change the position of the model - up (move the slider to the right) or down (move the slider to the left). The scale takes values from -1 to 1.
-
Forward-backward position Android - is used to change the position of the model - forward (move the slider to the right) or backward (move the slider to the left). The scale takes values from -1 to 1.
-
Rotation Android - is used to change the tilt of the model - tilt up (move the slider to the left) or tilt down (move the slider to the right). The scale takes values from -10 to 10.
Browser model settings (Browser model settings are only available if the User has the virtual fitting room option enabled in the browser)
These settings are used to adjust the size and position of the model in the browser.
Operation of the individual sliders:
-
Web scale - is used to decrease (move the slider to the left) or increase (move the slider to the right) the model. The scale takes values from 0.5 to 2.
-
Top-bottom web position - is used to change the position of the model - up (move the slider to the right) or down (move the slider to the left). The scale takes values from -1 to 1.
-
Forward-backward web position - is used to change the position of the model - forward (move the slider to the right) or backward (move the slider to the left). The scale takes values from -1 to 1.
-
Web rotation - is used to change the tilt of the model - tilt up (move the slider to the left) or tilt down (move the slider to the right). The scale takes values from -10 to 10.
-
Ear piece pitch (only for the model whose file has FBX extension) - is used to change - increase or decrease - the ear piece pitch (applies to eyeglass models)
The next part of the form is information about the variants of a particular model.
The first option is the button described above, which allows to publish the model variant in the application and on the totem (the option to publish the model variant on the totem is visible only if the User has access to the virtual fitting room on the totem).
Then you will see the following fields to fill in:
Version name field - a field describing the product name, which accepts any string of characters.
Version code field - a field describing the product code, which accepts any string of characters (optional field).
SKU field - a field describing the internal product number (optional field).
Link to the website field - a field containing a link taking the User to the website of the added product version (optional field).
Price field - a field describing the price of the product version, takes any numeric value (optional field).
Thumbnail field - allows the User to add a thumbnail file of the product version in *.png format. This can be done either by dragging and dropping the file into the Thumbnail field or by clicking and pointing to the file.
When the file has been properly added, the following message will appear under the field:
After saving the form, the correctly added thumbnail should appear in the field Thumbnail preview.
albedo - a parameter determining the reflectivity of a given surface; the field allows the User to add files in *.png format. This can be done either by dragging and dropping the file into the albedo texture field or by clicking and pointing to the file.
metallic - fields that allow the User to add files in *.png format. This can be done either by dragging and dropping the file into the Metallic Texture field or by clicking and pointing to the file.
normal - fields that allow the User to add files in *.png format. This can be done either by dragging and dropping the file into the Texture normal field or by clicking and pointing to the file.
When the files have been added correctly you should see the following messages:
Next is the Tags list, which, when expanded, allows you to add a tag (keywords, allowing you to group products with similar characteristics) to the selected model. This field is completed by selecting from the drop-down list of keywords on it.
To delete a variant, click the DELETE button.
It is also possible to add another model variant by clicking on the + ADD VERSION button.
To save changes to the form, click the SAVE button. The user can also delete the data on the model and its variants by clicking the DELETE button.
Edit added products
On the main page of the PRODUCTS tab, an ACTIONS button is visible next to each added model . After clicking on this button, the screen will show options for editing the added model and its version.
The first option is a button that allows you to publish the model in the application
The button that publishes versions of a given model in the application and on the totem is located below the model editing option, under the Version heading.
Another field that allows editing is Name. It allows you to change the name of the model (it accepts any string).
Under the name field there is a list named Brand. When we expand the list, we can change the brand name of a particular model.
The next field is the Category list, which allows us to change a specific category to a particular model. When expanded, we can select a category from the list (this field is only visible if category selection is enabled).
The next fields are Model File (OBJ) and Model File (FBX). They allow you to add a model file by dragging the file in the field area or by clicking in the field and selecting it. OBJ and FBX indicate with which extension the file is to be added.
If the file has been added under the Model File (OBJ) field, you will see the message ‘The file is in the database.’
Next is the Tags list, which, when expanded, allows you to add a tag (keywords, allowing you to group products with similar characteristics) to the selected model. This field is completed by selecting from the drop-down list of keywords on it.
Under the model editing options, you will find the model settings in iOS and Android, as well as in the browser (the model settings in the browser are available only when the User has the virtual fitting room option enabled in the browser).
- Model settings on iOS
To see the model’s setting options, click on the arrowhead; when clicked, the setting options will expand in the form of four sliders.
These settings are used to adjust the size and position of the model in the application.
Operation of the individual sliders:
-
Scale iOS - is used to decrease (move the slider to the left) or increase (move the slider to the right) the model. The scale takes values from 0.5 to 2.
-
Top-down iOS position - is used to change the position of the model - up (move the slider to the right) or down (move the slider to the left). The scale takes values from -1 to 1.
-
Forward-backward position iOS - is used to change the position of the model - forward (move the slider to the left ) or backward (move the slider to the right). The scale takes values from -1 to 1.
-
Rotation iOS - used to change the tilt of the model - tilt up (move the slider to the left) or tilt down (move the slider to the right). Scale taking values from -10 to 10.
- Model settings on Android
To see the model’s setting options, click on the arrowhead; when clicked, the setting options will expand in the form of four sliders.
These settings are used to adjust the size and position of the model in the application.
Operation of the individual sliders:
-
Android scale - is used to decrease (move the slider to the left) or increase (move the slider to the right) the model. The scale takes values from 0.5 to 2.
-
The position of the top-down Android - is used to change the position of the model - up (move the slider to the right) or down (move the slider to the left). The scale takes values from -1 to 1.
-
Forward-backward position Android - is used to change the position of the model - forward (move the slider to the right) or backward (move the slider to the left). The scale takes values from -1 to 1.
-
Rotation Android - is used to change the tilt of the model - tilt up (move the slider to the left) or tilt down (move the slider to the right). The scale takes values from -10 to 10.
- Browser model settings (Browser model settings are only available if the User has the virtual fitting room option enabled in the browser)
To see the model’s setting options, click on the arrowhead; when clicked, the setting options will expand in the form of five sliders.
These settings are used to adjust the size and position of the model in the browser.
Operation of the individual sliders:
-
Web scale - is used to decrease (move the slider to the left) or increase (move the slider to the right) the model. The scale takes values from 0.5 to 2.
-
Top-bottom web position - is used to change the position of the model - up (move the slider to the right) or down (move the slider to the left). The scale takes values from -1 to 1.
-
Forward-backward web position - is used to change the position of the model - forward (move the slider to the right) or backward (move the slider to the left). The scale takes values from -1 to 1.
-
Web rotation - is used to change the tilt of the model - tilt up (move the slider to the left) or tilt down (move the slider to the right). The scale takes values from -10 to 10.
-
Ear piece pitch (only for the model whose file has FBX extension) - is used to change - increase or decrease - the ear piece pitch (applies to eyeglass models)
Another part of the form is information about the variants of a particular model. You can see a thumbnail of the variant along with the section lines.
Underneath it you can see the button described above that allows you to publish the model variant in the application and on the totem (the option to publish the model variant on the totem is visible only if the User has access to the virtual fitting room on the totem).
On the right side of the form is a thumbnail of the model variant without a section.
ONLINE TRIMMING (option visible only if the user has the online fitting option enabled)
Under the thumbnail you can see a button that allows you to try on a variant of the model through the browser (option visible only if the user has the online try-on option enabled).
To try on a model through the browser, click on the ONLINE TRY ON button. You will be prompted for permission to use the camera by partner.ar-labs.io before a window appears to allow you to try it on in the browser.
As long as the User does not give permission for partner.ar-labs.io to use the camera, a message will appear on the screen:
After the user gives permission, the screen will go into AR mode and a camera view window will appear, where you can virtually try on the selected model.
During the virtual fitting there is an option to take a photo in the lower right corner. When you click on the camera icon, a photo will be taken and a message will appear: “Download photo?”.
To accept, click YES or to reject, click NO.
To exit the virtual fitting view, click the cross in the upper right corner.
Each variant is assigned a specific ID number consisting of a sequence of letters, numbers and special characters, the User cannot edit it. To the right of the ID number field you will see a button that allows you to copy the number.
Next to the ID number you can see the time of the last modification of the variant.
Beneath this information, there are further fields for editing the variant:
Version Name field - a field describing the name of the product, which accepts any string of characters.
Version code field - a field describing the product code, which accepts any string of characters (optional field).
SKU field - a field describing the internal product number (optional field).
Website Link field - a field containing a link taking the User to the website of the added product version (optional field).
Price field - a field describing the price of the product version, takes any numeric value (optional field).
Promotional Price field - a field describing the promotional price of the product version, it takes any numeric value (optional field).
Thumbnail field - allows the User to add a thumbnail file of the product version in *.png format. This can be done either by dragging and dropping the file into the Thumbnail field or by clicking and pointing to the file.
albedo - a parameter determining the reflectivity of a given surface; the field allows the User to add files in *.png format. This can be done either by dragging and dropping the file into the albedo texture field or by clicking and pointing to the file.
metallic - fields that allow the User to add files in *.png format. This can be done either by dragging and dropping the file into the Metallic Texture field or by clicking and pointing to the file.
normal - fields that allow the User to add files in *.png format. This can be done either by dragging and dropping the file into the Texture normal field or by clicking and pointing to the file.
When the files have been added correctly you should see the following messages:
Next is the Tags list, which, when expanded, allows you to add a tag (keywords, allowing you to group products with similar characteristics) to the selected model. This field is completed by selecting from the drop-down list of keywords on it.
To delete a variant, click the DELETE button.
It is also possible to add a model variant by clicking on the + ADD VERSION button.
To save changes to the form, click the SAVE button. The user can also delete the data on the model and its variants by clicking the DELETE button.
6. Marketplace
After clicking on the MARKETPLACE tab, the screen shows a list (database) of ready-made mainstream product models that customers can add to their product list (located in the ‘PRODUCTS’ tab)
At the top of the screen you can see model search functions.
In the Name field, enter the name of the model you are looking for (accepts any string).
When ‘all’ is selected, we have the option to select the specific status of a particular model (assigned/unassigned) or all (as above).
After completing all fields, click the SEARCH button or Enter. To delete the contents of all fields, click CLEAR.
Below the option to search for models by name and status, you will see a list of products added to the marketplace.
To add a product from the marketplace to your product list, click on the plus icon. When the icon is brighter, it means that the product has already been added.
7. Categories
CATEGORIES (tab visible only if category selection option is enabled).
When you click on the CATEGORIES tab, options appear on the screen to add product categories.
To add a category, click on the ADD button. Fields appear on the screen that allow you to add a category name and a category photo.
In the Name field, the name of the category should be entered (it accepts any string of characters), while the Category Photo field allows the User to add a file representing the product category in *.png format. This can be done either by dragging and dropping the file into the Category Photo field or by clicking and pointing to the file.
To save a category, click the SAVE button, while to cancel adding a category, click the CANCEL button.
To edit a category, click the EDIT button. Fields appear on the screen that allow you to edit the category name and the category picture.
8.Tags
The TAGS section is used to create and manage keywords to be assigned to products for grouping and easy searching.
To add a group of tags, click the ADD button. After clicking on the button, a window will appear on the screen that allows you to add a group of tags.
In the Group name field, enter the name of the tag group (accepts any string). To add a tag, click on the ADD TAG button. Another Tag Name field will appear in the window, into which you should enter the name of the tag to be added to the group. To remove the added tag, click the X button. To save the tag group, click the SAVE button or cancel the addition of the tag group by clicking the CANCEL button.
Existing tag groups can be edited by clicking the EDIT button or deleted by clicking the X button.
After clicking on the edit icon, editing options appear on the screen.
Tags can be edited by changing the group name, renaming tags, deleting individual tags with the X button or adding new tags with the ADD TAG button. To save your changes, click the SAVE button or to cancel your changes click the CANCEL button.
9. CLICK FIT WEB
After clicking on the CLICK FIT WEB tab, a list of models appears on the screen, including: sequence number, product name, version name, link to the page where the selected model can be purchased, and stock.
ADDING A LINK TO THE LIST
To add a link to the list, click the ADD button. After clicking, a form appears on the screen:
In the Product field, select the model name you are looking for from the list, in the Version field select the variant of the model you are looking for, and then in the Link field paste the copied link to the website where you can purchase the model variant.
To save the form, click SAVE or to cancel adding the link, click CANCEL.
EDIT ADDED LINKS
To edit an added link, click on the ACTIONS icon . After clicking, a form will appear on the page allowing you to edit the added link.
The user has the ability to edit:
- the Product field by selecting a different model name from the list
- the Version field by selecting from the list a different name of the Product version
- the Link field by pasting a new link to the website where the edited Product can be purchased.
To save the changes, click SAVE or to cancel editing the link, click CANCEL.
To remove a link from the list, click X icon. After clicking, a prompt will appear on the screen:
To confirm the deletion of the link, click REMOVE or to cancel the deletion, click CANCEL.
SEARCHING FOR A LINK ADDED TO THE LIST
To search for a previously added link, go to the main page of the CLICK FIT WEB tab. In the Product field, search for the name of the model you are looking for from the list and/or paste the link to the website where you can purchase the model you are looking for.
Then, to search for a model, click SEARCH or to clear the search fields, click CLEAR.
10. Brands
After clicking on the BRANDS tab, a list of added product brands will appear on the screen.
The list of product brands includes the order number, the name of the product brand and the action buttons we can perform to edit the product brand.
To add a new product brand, click on the Add button. Once clicked, a window will appear on the screen allowing you to add a product brand name.
In the Name field, we can enter the name of the product brand. To save the new product brand, click the Save button, to cancel the addition of the brand, click the CANCEL button.
By clicking the EDIT button, we can edit the name of the previously added product brand.
To save the product brand edit, click Save button, to cancel the brand edit, click CANCEL button.
The added product brand can be deleted by clicking X button.
11. PUSH notifications
In the PUSH NOTIFICATIONS section, the user can add content and send notifications to users of the application. To add content and send a notification, click on ADD button.
On the screen you will see a window with a form to fill in:
Enter the title of the notification in the “Title” field, and enter the content of the notification in the “Content” field. To send the notification to the application users, click “SEND”. Example:
An example of a notification displayed on the phone screen:
Added notifications are visible in the list of sent notifications.
12. TOTEMS
When you open the TOTEMS tab, you will see a list of devices on which the totem application is currently installed.
The list includes information about:
- status of the totem - active/deactivated,
- the name of the totem given by the user,
- the system name of the device on which the totem is running,
- date of expiration of the totem license,
- the date of the last synchronization of the device on which the totem works.
In addition to the above information for each of the added devices, the user has the option of actions - managing banners added to the totem and editing the totem.
By clicking on the BANNERS button, the user has the option to add a banner to the totem by clicking on the ADD BANNERS button.
After clicking the ADD BANNERS button, the user, in order to add a banner, must fill in all the required fields:
- File type
-
Duration - the duration of the banner display (you can complete the field by entering a value or using the arrows on the right side of the field)
-
Time to display - time from totem launch to first banner display (you can complete the field by entering a value or using the arrows on the right side of the field)
-
Banner status
- Banner file (you can add a file by clicking in the box and selecting a file from the device drive or by dragging the file and dropping it in the box)
To save the banner, click the SAVE button or cancel the action by clicking the CANCEL button.
After clicking the “SAVE” button, the added banner will appear in the list of banners added to the totem on the given device. This list contains information about the banner name, banner type (SMALL/LARGE), duration (time to display the banner), time to display the banner (from the start of the totem) and banner status (active/inactive).
In addition to the above information, there are two action buttons on the list - EDIT and DELETE.
After clicking the EDIT button, the user has the option to change all the previously added information about the banner:
To save the changes, after editing, click the SAVE button or “CANCEL” button to abandon the changes.
To delete the banner, the user must click the DELETE button and then confirm the action with the DELETE button again:
When you click REMOVE, the banner will be permanently removed from the totem on the device in question.
TOTEM EDIT
By clicking the EDIT button, the user can edit the appearance of the totem and the number of products displayed on it.
In the totem editing panel, the user can check what status a given totem has (active/deactivated) and change its name. He can also manage the license of the totem (activate or deactivate the license, which will remove the totem).
To remove a totem, you need to deactivate the license of the given totem, then activate the totem to synchronize it with the panel and remove it from the totem editing panel.
The user can manage the appearance of the totem’s welcome screen.
The user can add (by clicking in a field or dragging a file and dropping it in a field) or remove individual graphics on the totem welcome screen according to the scheme shown.
The user can also edit the colors of the font, the totem welcome screen, the background color and the front color of the progress bar. The fields should be filled with color values stored using the RGB code.
Users can also add or remove fitting room screen graphics and enable or disable the ability to display QR codes that refer the customer to the product page.
The SAVE button saves all the changes applied by the user.
Below the totem editing form, the user can add or remove products that are available on the totem. The product must be previously added to the list of products in the panel (tab PRODUCTS).
The user can add a version of the product to the totem using the ADD VERSION button.
After clicking on the ADD VERSION button, the user must select the product from the drop-down list, then its version, and click SAVE.
The added product will appear in the list of products added to the totem.
To remove a product from the list, click the DELETE button, and then confirm the action with the DELETE button again:
The product will be removed from the list of added to the totem, but will still remain in the product database in the panel (tab PRODUCTS).
13. Settings
In the SETTINGS section, the User has access to data such as Partner, API Key, Language, Privacy Policy Link, Privacy Policy Content.
The Partner and API Key fields are not editable by the User.
The Language field is used to change the language in which the admin panel will be translated. To change the language, select from the list:
Available language versions of the administration panel: Polish, English.
The Privacy Policy Link field contains a link where the privacy policy for the User’s application can be found on the official ClickFitApp website.
The User can edit the Privacy Policy Link field.
The Privacy Policy Content field contains the content of the User’s application privacy policy.
The user can edit this field.
To save changes to the Settings, click SAVE.