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.
- Adding a small snippet into the Javascript, or
- 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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Quality
Sets the image quality
Allowed Arguments: 1..100
API Example: viewer.quality(5)
URL Example: http://embed.imajize.com/8rLM5DRyKik?quality=5
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