360 Viewer API

You can customize the viewer by using query parameters or an API. This give you a larger range of configuration options for multiple 360 views. For example, if you wanted to have a 360 view on two different pages, they would have the same settings (Auto Spin, Zoom, etc.) by default. Now, you can use either of the two methods below to make each view behave independently.

  1. Adding a small snippet into the Javascript, or
  2. Using URL Query Parameters (see below)

How to use URL query parameters

  • Step 1: Select the configurations that you would like to change
  • Step 2: Add the method name and argument to the end of the embed URL code in the form of
    http://embed.imajize.com/[UUID]?[method_name]=[argument]
  • To add more than one customization, separate them with a '&'. For example,
    http://embed.imajize.com/[UUID]?[method_name]=[argument]&[method_name]&[argument]
  • Step 3: Run the page and see the new settings of the 360 viewer

Don't forget to replace [UUID], [method_name], and [argument] with your own values. Please view the  table for more information


Manual Spin

Allows a user to manually spin the product


Allowed Arguments: true, false

API Example: viewer.manual_spin(false)

URL Example: http://embed.imajize.com/8rLM5DRyKik?manual_spin=false

→ Preview


Manual Spin Interaction

Changes how the user can spin the 360 viewer.

Users can either click and drag spin or simply hover their cursor over the 360 viewer


Allowed Arguments: "drag”, "hover”

API Example: viewer.manual_spin_interaction("hover")

URL Example: http://embed.imajize.com/8rLM5DRyKik?manual_spin_interaction=hover

→ Preview


Manual Spin Sensitivity

Changes how quickly the viewer spins


Allowed Arguments: 1.0..5.0

API Example: viewer.manual_spin_sensitivity(1.9)

URL Example: http://embed.imajize.com/8rLM5DRyKik?manual_spin_sensitivity=1.9

→ Preview


Manual Spin Inertia

Changes how quickly the viewer slows to a stop after a spin


Allowed Arguments: 1..5

API Example: viewer.manual_spin_inertia(3)

URL Example: http://embed.imajize.com/8rLM5DRyKik?manual_spin_inertia=3

→ Preview


Zoom

Allows users to zoom into image


Allowed Arguments: true, false

API Example: viewer.zoom(true)

URL Example: http://embed.imajize.com/8rLM5DRyKik?zoom=true

→ Preview


Zoom Magnification

Set how deep the zoom goes


Allowed Arguments: 2..5

API Example: viewer.zoom_ratio(4)

URL Example: http://embed.imajize.com/8rLM5DRyKik?zoom_ratio=4

→ Preview


Zoom Animation Speed

Control the speed of the zoom animation


Allowed Arguments: 1..1000

API Example: viewer.zoom_speed(80)

URL Example: http://embed.imajize.com/8rLM5DRyKik?zoom_speed=80

→ Preview


Auto Spin

Allows viewer spin automatically on start-up


Allowed Arguments: true, false

API Example: viewer.auto_spin(true)

URL Example: http://embed.imajize.com/8rLM5DRyKik?auto_spin=true

→ Preview


Number of Auto Spins

Control the number of automatic spins


Allowed Arguments: 0..n (or "inifinite” for the viewer to keep spinning)

API Example: viewer.auto_spin_count("infinite")

URL Example: http://embed.imajize.com/8rLM5DRyKik?auto_spin_count=infinite

→ Preview


Speed of Auto Spins

Control the speed of the automatic spin


Allowed Arguments: 1..1000

API Example: viewer.auto_spin_speed(50)

URL Example: http://embed.imajize.com/8rLM5DRyKik?auto_spin_speed=50

→ Preview


Full Screen Mode

Allow a full screen mode by using icon on top right of the screen


Allowed Arguments: true, false

API Example: viewer.fullscreen(true)

URL Example: http://embed.imajize.com/8rLM5DRyKik?fullscreen=true

→ Preview


Full Screen Icon

Change the different styles of the full screen icon


Allowed Arguments: "a", "b", "c"

API Example: viewer.fullscreen_icon_variant("b")

URL Example: http://embed.imajize.com/8rLM5DRyKik?fullscreen_icon_variant=b

→ Preview


Full Screen Icon Size

Change the size of the full screen icon


Allowed Arguments: 4..18

API Example: viewer.fullscreen_icon_size(10)

URL Example: http://embed.imajize.com/8rLM5DRyKik?fullscreen_icon_size=10

→ Preview


Viewer Background Color

Change the background color of the viewer


Allowed Arguments: any hex color (or "transparent” for PNG based 360 views)

API Example: viewer.background_color("ffffff")

URL Example: http://embed.imajize.com/8rLM5DRyKik?background_color=ffffff

→ Preview


Starting Frame

Change the frame that viewers see when the product first loads


Allowed Arguments: 1..max_image

API Example: viewer.key_image(10)

URL Example: http://embed.imajize.com/8rLM5DRyKik?key_image=10

→ Preview


Instruction Language

Change language of the instructions strip


Allowed Arguments: "en", "ru", "zh", "fr", "th", "de", "bg", "uk", "es", "vi", "ja", "sk", "tr", "it", "no", "fi", "el", "pt", "cs", "sv", "pl", "hu", "sr", "nl", "da", "id", "he", "ro", "ms", "ar", "ko"

API Example: viewer.instruction_language("th")

URL Example: http://embed.imajize.com/8rLM5DRyKik?instruction_language=th

→ Preview


Instruction Display Position

Change where the instruction is located


Allowed Arguments: "top", "middle", "bottom"

API Example: viewer.instruction_position("top")

URL Example: http://embed.imajize.com/8rLM5DRyKik?instruction_position=top

→ Preview


Instruction Display

Allows instruction to never, once, or always be displayed


Allowed Arguments: "never", "once", "always"

API Example: viewer.instruction_display("once")

URL Example: http://embed.imajize.com/8rLM5DRyKik?instruction_display=once

→ Preview


Instruction Style

Change the design of the instruction message


Allowed Arguments: "a", "b", "c"

API Example: viewer.instruction_background("c")

URL Example: http://embed.imajize.com/8rLM5DRyKik?instruction_background=c

→ Preview


Manual Spin Direction

Allows you control which direction the viewer spins. Recommended to go with the direction of the cursor


Allowed Arguments: true, false

API Example: viewer.reverse_spin(true)

URL Example: http://embed.imajize.com/8rLM5DRyKik?reverse_spin=true

→ Preview


Thumbnail Order

Reverse the order in which the still images in the thumbnails are displayed


Allowed Arguments: true, false

API Example: viewer.reverse_thumbs(false)

URL Example: http://embed.imajize.com/8rLM5DRyKik?reverse_thumbs=false

→ Preview


Thumbnail Dock Background Color

Allows adjustments of the dock’s background color


Allowed Arguments: any hex color

API Example: viewer.dock_background_color("aaaaaa")

URL Example: http://embed.imajize.com/8rLM5DRyKik?dock_background_color=aaaaaa

→ Preview


Thumbnail Dock Gradient

Fine tune gradient of the dock


Allowed Arguments: 0..100

API Example: viewer.dock_background_gradient(50)

URL Example: http://embed.imajize.com/8rLM5DRyKik?dock_background_gradient=50

→ Preview


Thumbnail Rounded Corners

Adds rounded corners to thumbnails


Allowed Arguments: 0..100

API Example: viewer.dock_thumbs_border_radius(10)

URL Example: http://embed.imajize.com/8rLM5DRyKik?dock_thumbs_border_radius=10

→ Preview

Still need help? Contact Us Contact Us