Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

There are two types of blocks with diamond information from Cutwise that can be embedded in website pages, forum messages, online-presentations:

  1. Cutwise Widget shows  shows all captured videos and photos along with Optical Metrics
  2. Cutwise Player shows  shows one pre-selected video\image from ViBox or DiBox

...

Embed a Cutwise Widget using an <iframe> tag. Define an  <iframe>  tag in your application in which the src URL specifies the content that the widget will load as well as any other widget parameters you want to set. The  <iframe>  tag's width and height parameters specify the dimensions of the widget. We strongly recommend to set width and height as set in the Predefined Templates table below. 

Code Block
languagexml
themeEclipse
titleWidget Embedding template
<iframe
	name="Cutwise Widget"	
	width="{WIDGET_WIDTH}"
	height="{WIDGET_HEIGHT}"
	frameborder="0"
	sandbox="allow-same-origin allow-scripts allow-presentation"
	src="https://widget.cutwise.com/v1/{CUTWISE_ID}?template={TEMPLATE_CODE}&autoplay={AUTOPLAY}"
	allowfullscreen
></iframe>

Parameters

Parameter nameAvailable valuesDefaultSampleDescription

CUTWISE_ID


https://widget.cutwise.com/v1/333?template=media-metrics-v1&autoplay=1
        

Product ID to embed. You can see it in cutwise diamond page URL: https://cutwise/diamond/ 333

Link for embedding = https://widget.cutwise.com/v1/333?template=media-metrics-v1

AUTOPLAY

1, 0

0

...&autoplay=1&...

This parameter specifies whether the initial video will automatically start to play when the player loads.

AUTORESIZE1, 01...&autoresize=0&...Disable autoresize listeners. This parameter is affects only for media-v1 template.

Predefined Templates

Template codeWidth, pxHeight, pxAppearance
media-metrics-v1480640

Image Modified

media-v1480580

Image Modified

Usage example:

Code Block
languagexml
themeEclipse
titleCorrect widget code example
<iframe
	name="Cutwise Widget"
	width="480"
	height="640"
	frameborder="0"
	sandbox="allow-same-origin allow-scripts allow-orientation-lock allow-pointer-lock allow-presentation"
	src="https://widget.cutwise.com/v1/333?template=media-metrics-v1&autoplay=1"
	allowfullscreen
></iframe>

...

Embed a Cutwise Video Player

This section explains how to embed a Cutwise Video Player in your application and also defines the parameters that are available in the Video the Video Player.    

By appending parameters to the IFrame URL, you can customize the playback experience in your application. For example, you can automatically play videos using the AUTOPLAY parameter or choose  a media type using the SETUP_PRESET_ID parameter. This page currently defines all parameters supported in Cutwise player.

Embed a Cutwise player using an <iframe> tag. Define an  <iframe>  tag in your application in which the src URL specifies the content that the player will load as well as any other player parameters you want to set. The  <iframe>  tag's width and height parameters specify the dimensions of the player. We recommend choosing a similar value for width and height parameters and MEDIA_SIZE parameter. 

Example: 


Code Block
languagexml
themeEclipse
titleWidget Embedding template
<iframe
	name="Cutwise Player"	
    width="{MEDIA_SIZE}"
	height="{MEDIA_SIZE}"
	frameborder="0"
	sandbox="allow-same-origin allow-scripts allow-presentation"
	src="https://widget.cutwise.com/video/{CUTWISE_ID}?sp={SETUP_PRESET_ID}&autoplay={AUTOPLAY}"
	allowfullscreen
></iframe>

Example without optional parameters: 

Code Block
languagexml
themeEclipse
titleCorrect widget code example
<iframe
	name="Cutwise Player"
	width="480"
	height="480"
	frameborder="0"
	sandbox="allow-same-origin allow-scripts allow-presentation"
	src="https://widget.cutwise.com/video/333"
	allowfullscreen
></iframe>

Live

...

demo example

http://files-cdn.cutwise.com/widget/video-demo-1/index.html 

Code for this demo example:

Code Block
languagexml
themeEclipse
titleCorrect widget code example
<iframe
	name="Cutwise Player"
	width="640"
	height="640"
	frameborder="0"
	sandbox="allow-same-origin allow-scripts allow-presentation"
	src="https://widget.cutwise.com/video/333?sp=51&autoplay=1"
	allowfullscreen
></iframe>

Parameters

Parameter nameAvailable valuesDefaultSampleDescription

CUTWISE_ID


https://widget.cutwise.com/video/333

Cutwise Product ID to embed. You can see it in cutwise diamond page URL: https://cutwise/diamond/333

Link for embedding = https://widget.cutwise.com/video/333

AUTOPLAY

1, 0

0

...&autoplay=1&...

This parameter specifies whether the initial video will automatically start to play when the player loads.

GRAYSCALE1, 00...&grayscale=1&...This parameter specifies whether the videos or images will show in grayscale tone.
AUTORESIZE1, 01...&autoresize=0&...Disable autoresize listeners

SETUP_PRESET_ID

integer ID

first video on diamond page

...&sp=43&...

This parameter specifes what media will be shown for current CUTWISE_ID.


List of SETUP_PRESET_ID

Currently supported video are (only if this video available on product page):

VideoImage
SetupPreset IDSetupPreset TitleSetupPreset IDSetupPreset Title
1ViBox Vertical 3607Office Black
2ViBox 3609Office Gray
3ViBox Vertical Swinging10ASET Black
4ViBox Swinging11ASET White
5ViBox Fire Mono12IdealScope
6ViBox Office Mono13Arrows
21ViBox Fire14Hearts
22ViBox Office15Munsell Color Matching
23Darkfield Swinging (Crown)16Munsell Color Matching Close-up
28ViBox Fire Gyro17Clarity Diagram
32Darkfield Gyro18Office Inclusions
33Vibox Fire Gyro 2D31Fluorescence
38Fluorescence Live Photo42Table Color Outdoor
41Office Live Photo50Darkfield
43DiBox 2.0 Fire52Pavilion Color Lab
44Fire Live Photo54Fire
45DiBox 2.0 Office55Pavilion Fluorescence
47ASET Black Live Photo56Table Color Lab
51Darkfield57Table Color UV Free
53Pavilion Color Lab Live Photo58ASET Black Table Down
60Brightfield59Brightfield


61White Dome Table Down
6263Pavilion Fluorescence Dark
Fluorescence Dark


64Table Color Lab Live Photo

Web browser supported

  • Google Chrome (last version -3)
  • FireFox (last version -3)
  • Safari 11+
  • Microsoft Edge (last version -3)

Cutwise Widget Versions History

June 24, 2019 – v.1.5.0

  • Added autoresize parameter for media-v1 template.
  • Added fullscreen view for iPad (iOs, Safari 12.2).
  • Bugfixes. 

March 18, 2019 – v.1.4.0

  • Added autoresize settings in Cutwise Player.
  • Bugfixes. 

...