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
  • To add more than one customization, separate them with a '&'. For example,
  • 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


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

Chunk Size

Sets the number of images loaded in parallel

Allowed Arguments: 1..360

API Example: viewer.chunk_size(10)

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

→ Preview

Chunk Delay

Sets the delay in ms before the next set of images (chunk) is loaded

Allowed Arguments: 1..n

API Example: viewer.chunk_delay(1000)

URL Example: http://embed.imajize.com/8rLM5DRyKik?chunk_delay=1000

→ Preview


Sets the image quality

Allowed Arguments: 1..100

API Example: viewer.quality(5)

URL Example: http://embed.imajize.com/8rLM5DRyKik?quality=5

→ Preview

Load on

Sets the loading behaviour

Allowed Arguments: "click", "hover", "start"

API Example: viewer.load_on("click")

URL Example: http://embed.imajize.com/8rLM5DRyKik?load_on=click

→ Preview

Still need help? Contact Us Contact Us