Skip to end of metadata
Go to start of metadata

Overview

There are two types of blocks with diamond information from Cutwise that can be embedded in website pages, web systems and platforms or online-presentations.

  1. Cutwise Widget shows all captured videos and photos along with Optical Performance Scores
  2. Comparison Widget allows you to compare a diamonds.
  3. Cutwise Player shows one pre-selected video\image from ViBox or DiBox

(warning) Only diamonds published on Cutwise can be shown in Cutwise Widget (status is set to Widget, Cutwise Search or Full Access).

Embed a Cutwise Widget

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

By appending parameters to the iFrame URL, you can customize the view and playback experience in your application. For example, you can choose one of predefined templates for product view.

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 recommend to set width and height as set in the Predefined Templates table below. 

Widget Embedding template
<iframe
	name="Cutwise Widget"	
	width="{WIDGET_WIDTH}"
	height="{WIDGET_HEIGHT}"
	frameborder="0"
	src="https://widget.cutwise.com/{TEMPLATE_NAME}/v1/{CUTWISE_ID}?autoplay={AUTOPLAY}"
	allowfullscreen
></iframe>

Parameters

Parameter nameAvailable valuesDefaultExampleDescription

CUTWISE_ID


https://widget.cutwise.com/performance/v1/333?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/performance/v1/333

AUTOPLAY

1, 0

1

...&autoplay=1&...

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

SP[]integer ID

Default media same as from the diamond page


..&sp[]=43&sp[]=10&...

This parameter available only for visual template.

You can select any videos to show them on widget, for example:

With desired SETUP_PRESET_ID, like 1,2,10,38 and etc.

Media SETUP_PRESET_ID can be found by clicking on image\video thumbnail on stone page and checking sp=N in browser URL or check list of SETUP_PRESET_ID on documentation page: Cutwise Widget#ListofSETUP_PRESET_ID

ddcw-fancyDefault optical performance evaluation as from the diamond page...&dd=cw-fancy&...

Demonstration Optical Performance Scores with Grades Relatively to Cutting Form.

This function is available in the Cutwise Widget templates (performance, report and RapNet). Enabled via specific parameter: ...?dd=cw-fancy&...

For example Cutwise Widget with this parameter: 

https://widget.cutwise.com/performance/v1/34294?dd=cw-fancy 

Predefined Templates

More information about Cutwise Widget types: 

Template nameExample linkWidth, pxHeight, pxAppearance
performancehttps://widget.cutwise.com/performance/v1/337480640

320

500

visualhttps://widget.cutwise.com/visual/v1/333480580

320420

reporthttps://widget.cutwise.com/report/v1/386/1366768

Usage example

Correct widget code example
<iframe
	name="Cutwise Widget"
	width="480"
	height="640"
	frameborder="0"
	src="https://widget.cutwise.com/performance/v1/333"
	allowfullscreen
></iframe>


Live demo example:

https://files-cdn.cutwise.com/widget/video-metrics-demo-v1/index.html

Comparison Widget

This type of widget allows you to compare a diamonds.

Parameters

Parameter nameAvailable valuesDefaultExampleDescription

CUTWISE_ID


https://widget.cutwise.com/pair-comparison/59027/34016

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

Link for embedding = https://widget.cutwise.com/pair-comparison/59027/34016

l1, 01https://widget.cutwise.com/pair-comparison/65152/61719?l=1

This parameter enable or disable special labels for LabGrown and Photoreal Diamonds.

l - label

1 - enable, 0 - disable

Predefined Templates

Template nameExample linkWidth, pxHeight, pxAppearance
pair-comparisonhttps://widget.cutwise.com/pair-comparison/59027/3401612001000

Usage example

Correct widget code example
<iframe
	name="Cutwise Widget"
	width="1200"
	height="1000"
	frameborder="0"
	src="https://widget.cutwise.com/pair-comparison/59027/34016"
	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 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: 

Widget Embedding template
<iframe
	name="Cutwise Player"	
    width="{MEDIA_SIZE}"
	height="{MEDIA_SIZE}"
	frameborder="0"
	src="https://widget.cutwise.com/video/{CUTWISE_ID}?sp={SETUP_PRESET_ID}&autoplay={AUTOPLAY}"
	allowfullscreen
></iframe>

Example without optional parameters: 

Correct widget code example
<iframe
	name="Cutwise Player"
	width="480"
	height="480"
	frameborder="0"
	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:

Correct widget code example
<iframe
	name="Cutwise Player"
	width="640"
	height="640"
	frameborder="0"
	src="https://widget.cutwise.com/video/333?sp=51&autoplay=1"
	allowfullscreen
></iframe>

Parameters

Parameter nameAvailable valuesDefaultExampleDescription

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&...

Enable or disable autoresize listeners. If autoresize parameter is enabled, Cutwise Widget will resize automatically based on iframe width and height parameters.

The video widget's size changes discretely and adjusts to the size of the iframe.

The following sizes are supported:

  • 160x160
  • 240x240
  • 320x320
  • 480x480
  • 640x640
  • 960x960
  • 1200x1200
  • 1920x1920

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 2D31Face-up Fluorescence
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
81360 Video Girdle (third-party hardware)61White Dome Table Down
82360 Video Pavilion (third-party hardware)64Table Color Lab Live Photo

Supported web browsers

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

Cutwise Widget Versions History

July 3, 2020

  • Comparison Widget. 
  • Demonstration Optical Performance Scores with Grades Relatively to Cutting Form.

  • Bugfixes.

February 5, 2020

  • Customized visual template.
  • Bugfixes.

August 14, 2019

  • New types of Cutwise Widget: performance and report.
  • New templates name.
  • Adaptive layout.  
  • Bugfixes.

June 24, 2019

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

March 18, 2019

  • Added autoresize settings in Cutwise Player.
  • Bugfixes. 

December 10, 2018

Cutwise Video Player:

  • Added HQ mode for high-dpi devices.
  • Added lazy loading.
  • Added support of plotting data.
  • Added demo mode.
  • Added autoplay.
  • Added support of scroll on touch devices.
  • Added various performance optimizations.
  • Support new browser versions.
  • Fixed fullscreen, stereo mode and zoom-mode related bugs, improved stability.

Cutwise Widget:

  • Added HQ Mode
  • Added support of adaptive layout of web pages
  • Changed color theme

November 1, 2018

  • Supported autoresize option;
  • media_size is deprecated now.

June 19, 2018

  • Added Cutwise Metrics template

April 15, 2018 

  • Initial Release
  • Embed a Cutwise player
  • No labels