Customize my widget with URL parameters

There are 3 primary ways to customize your BioDigital Human widget for your website or application using URL parameters:

   Control the UI and appearance of your widget

You can use URL parameters to determine:

• The background color of your scene
• The position of the camera on load
• Which navigation and interactive tools appear to your end users

Background color is in RGB format. To customize your scene’s background color, you will need to choose 3 or 6 comma-separated values between 0 and 255 (corresponding to RGB codes). 3 numbers will yield a solid RGB background. 6 numbers will yield a radial RGB gradient, with the first set of numbers representing the center of the scene. For example, 255,255,255,0,0,0 will yield a radial gradient with a white center and a black vignette: 

Camera position is determined by 6 comma-separated numbers. The first 3 numbers are the camera's x,y,z position, and the last 3 numbers are the camera's "look" x,y,z position.

Navigation and interactive tools: To learn how to enable or disable interactive tools your widget, see this article. 

   Control your widget’s load experience

Use URL parameters to determine how your end users will first interact with your widget when it loads. 

By default, when your widget first loads, a still version of it (its “background image”) will appear on the screen with a “Click to Interact” button in the center, while all of the widget’s assets load in the background. When a user clicks the “Click to Interact” button, the background image will disappear and the user will be able to begin interacting with the 3D scene.

• To change the background image that appears on load of your widget, use the URL parameter load-image-src and specify the path name of your custom image. For example, load-image-src =mycompany/img/cochlear_implant.jpg. 

• When the URL parameter load-image-display is set to “fallback,” the widget’s background image will only load in a fallback situation (e.g., unsupported browser/no WebGL). In all other contexts, the 3D scene will load behind the image (see first bullet point above). 

• When the URL parameter load-hint-hand is used, an animated Hand Hint with the message “Click to Interact in 3D” will load with your widget instead of the background image and default “Click to Interact” button. The hand hint will move side to side over the center of the scene until it’s triggered to stop in one of two ways:
  • When set to “=click,” the Hand Hint will disappear when the user clicks on the model.
  • When set to “=fade,” the Hand Hint will disappear automatically after 5 seconds.

   Select which 3D models load in your scene

Use URL parameters to load an anatomy object, anatomy or condition module, or bookmark into your widget. All you need is the content ID. For instructions on how to retrieve this for a given model, see Obtain a content ID for a module or bookmark.