90% online shoppers rely on product photos when deciding on a potential purchase.

Entry point button

For successful integration of this button, you need to add several lines of JS-code to the place, where you would like to display the button.

To initialize the button, you need to call this code with a token, element and vendor code and room name:

First integration option:

<script type="application/javascript" src="https://d35so7k19vd0fx.cloudfront.net/production/integration/view-360.min.js"></script>

<script>
  const entryPoint3DGraphics = new window.WEntryPoint360({
    token: "your token for wizart",
    element: "link to the element to insert the 360 view entry point button", // example document.getElementById("0000")
    vendorCode: "vendor code of product or name",
    clientUuid: "client uuid",
  });
  entryPoint3DGraphics.render();
</script>

Parameter	Description	Type

Parameter	Description	Type
token	api token - generated and issued by Wizart Administrator.	Required
vendorCode	Unique SKU ID of the product uploaded to Wizart system.	Required
clientUuid	Add client_uuid generated and issued by Wizart Administrator.	Required
element	link to the element to insert the entry point button (e.g document.getElementsByTagName("")[0])	Optional

When you are rendering button, you can write next parameters to style your button:

If you want re-styled button, it will look like: entryPoint3DGraphics.render({title: "Your title", color: "#000"});

  fontSize,
  title,
  tooltipTitle,
  tooltipPosition,
  tooltipDisable,
  glitterDisable,
  className,
  borderRadius,
  background,
  color,
  width,
  height,
  border,
  image,
  onloadCallback,
  onCloseCallback,
  onButtonClick,
  elementSelector,
  insertElementPosition,
  iframeElementSelector,
  insertIframeElementPosition,

Name of parameter	Description and Examples of using

Name of parameter	Description and Examples of using
`fontSize`	Font size of your button. `entryPoint3DGraphics.render({fontSize: "24px"});`
`title`	Text to be displayed on the button (the default value is "Try it in your room in one click!"). `entryPoint3DGraphics.render({title: "Your title"});`
`tooltipTitle`	Text to be displayed on the tooltip (the default value is "See it in your room!"). `entryPoint3DGraphics.render({tooltipTitle: "Your tooltip title"});`
`tooltipPosition`	Tooltip position towards the button. Available values are top, right, bottom, left (the default value is top). `entryPoint3DGraphics.render({tooltipPosition: "bottom"});`
`tooltipDisable`	If the value is “true”, the tooltip will not be displayed. Default: false. `entryPoint3DGraphics.render({tooltipDisable: "true"});`
`glitterDisable`	If the value is “true”, glitter will not be displayed. `entryPoint3DGraphics.render({glitterDisable: "true"});`
`className`	Class to be set for the button element on the page. Mostly, using to change more style, that our default parameters can’t (e.x. box-shadow). `entryPoint3DGraphics.render({className: "wizart-main-page"});`
`borderRadius`	Button border-radius. `entryPoint3DGraphics.render({borderRadius: "15px"});`
`background`	Button background. `entryPoint3DGraphics.render({background: "#000"});`
`color`	Button text color. `entryPoint3DGraphics.render({color: "#FFF"});`
`width`	Max button width. `entryPoint3DGraphics.render({width: "100%"});`
`height`	Button height. `entryPoint3DGraphics.render({height: "60px"});`
`border`	Style of button. For example: `2px solid;` `entryPoint3DGraphics.render({border: "2px solid"});`
`image`	Link to the icon that will be displayed on the button. `entryPoint3DGraphics.render({image: "https://d365wxw7pkwfoh.cloudfront.net/Wizart_Logo_e23fb5c030.svg"});`
`onloadCallback`	The name of the function to be in the global scope. The function will be called when the visualizer is loaded. Example: `function wizartOnLoad() { console.log('Visualizer is loaded!'); } entryPoint.render({onloadCallback: "wizartOnLoad"});` `entryPoint3DGraphics.render({onloadCallback: "nameOfFunction"});`
`onCloseCallback`	The name of the function to be in the global scope. The function will be called after the visualizer is closed. Example: `entryPoint3DGraphics.render({onCloseCallback: "nameOfFunction"});`
`onButtonClick`	The name of the function to be in the global scope. The function will be called when the button is cliecked. Example: `entryPoint3DGraphics.render({onButtonClick: "nameOfFunction"});`
`elementSelector`	A CSS selector to select an element on the page to insert a button where you want. Example (you want locate it under cart button): `entryPoint3DGraphics.render({elementSelector: "SELECTOR"});`
`insertElementPosition`	A CSS selector to select an element on the page to insert a button where you want. Example (you want locate it under cart button): `entryPoint3DGraphics.render({insertElementPosition: "nameOfElementPosition"});`
`iframeElementSelector`	A CSS selector to select an element on the page to insert the fitting room where you want. The best way to put iframe is “before body“. Example: `entryPoint3DGraphics.render({iframeElementSelector: "nameOfSelector"});`
`insertIframeElementPosition`	The insertion position of the element. Values: append, before, after. default value: append. The best way to put iframe is “before body“. `entryPoint3DGraphics.render({insertIframeElementPosition: "nameOfElementPosition"});`

Second integration option:

Parameter	Description and Examples of using

Parameter	Description and Examples of using
class	Required parameter. `Cannot be changed`.
src	Link to js-file with integration code.
data-token	api token - generated and issued by Wizart Administrator.
data-vendor_code	Unique SKU ID of the product uploaded to Wizart system.
data-client_uuid	Add client_uuid generated and issued by Wizart Administrator.
data-title	Text to be displayed on the button (the default value is "Try it in your room in one click!").
data-color	Button text color.
data-background	Button background.
data-tooltip-disable	If the value is “true”, the tooltip will not be displayed.
data-tooltip-title	Text to be displayed on the tooltip (the default value is "See it in your room!").
data-tooltip-position	Tooltip position towards the button. Available values are top, right, bottom, left (the default value is top)
data-glitter-disable	If the value is true, glitter will not be displayed
data-width	Button width
data-height	Button height
data-border	Button border
data-border_radius	Button border-radius
data-image	Link to the icon that will be displayed on the button
data-class_name	Class to be set for the button element on the page
data-onload-callback	The name of the function to be in the global scope. The function will be called when the visualizer is loaded.
data-on-close-callback	The name of the function to be in the global scope. The function will be called after the visualizer is closed.
data-element-selector	A CSS selector to select an element on the page to insert a button where you want.
data-insert-element-position	The insertion position of the element. Values: append, before, after. default value: append.
data-iframe-element-selector	A CSS selector to select an element on the page to insert the fitting room where you want.
data-insert-iframe-element-position	The insertion position of the element. Values: append, before, after. default value: append.

What will you get?

You can view this functionality on the live website: https://thematerialcloud.com/products/harmony-pasadena-california-green

Button called 360 Product View.