Code Widget Testing Guide

Overview

This document serves as an internal guide for testing code widgets in the content renderer system. It contains a comprehensive collection of code widget examples that can be used to validate new versions of the content renderer.

Setup and Testing Workflow

Prerequisites

• Ensure you've pulled the specific content_renderer branch you want to test
• This branch should be pointing to the local version of the content_renderer repo

Recommended Testing Process

1. Switch renderer to master and open the test page in docs-dev preview
2. Open the master version in one browser tab
3. Switch to the renderer branch for testing
4. Open the same page in a different tab for easy comparison

Content Structure

Transformation Types

Video Transformations

Complex video transformation with scaling, rotation, and overlay:

Video to Image Conversion

Animated GIF creation from video with specific frame and delay settings:

Image to Video Conversion

Converting animated GIF to video format:

Known Issue: The widget code is not outputting the thumbnail video when the base asset is an image. This functionality was previously working but appears to have been broken.

Audio Processing

Audio transformation with duration and start offset:

3D Model Processing

360-degree animated GIF from 3D model:

Conditional Transformations

Conditional Image Processing

Aspect ratio-based conditional transformation:

Conditional Video Processing

Width-based conditional overlay:

Variable Usage

Dynamic color variables based on face count:

Arithmetic Operations

Mathematical calculations in transformations:

Complex Transformation Example

Multiple transformations, overlays, and effects:

Widget UI Configuration Options

Default Widget Behavior

Standard widget with all features enabled:

Embedded Image/Video Control

Hide the embedded thumbnail below the widget:

URL Tab Control

Remove the URL tab from the widget:

SDK Tab Control

Hide all SDK tabs:

All Tab Control

Disable the "All" tab:

Custom Framework Selection

Specify which SDK frameworks to include:

Notes: - Only specified SDKs are included - URL & All tabs remain unless separately disabled - Multiple versions of the same SDK use dropdown selection - Tab order follows content_renderer configuration, not specification order

URL Generation Mode

Show URL generation methods instead of image/video tag helpers:

Thumbnail Configuration

Set DPR, width, and HTML attributes for embedded thumbnails:

Note: Thumbnail options affect only the embedded page image/video, not the widget code or linked content.

Video Poster Configuration

Custom poster and thumbnail settings for videos:

Account-Specific Behavior

Demo Account Default Settings

• with_url: true - Show URL tab
• with_code: true - Show SDK tabs
  
• with_image: true - Show embedded thumbnail
• popup: true - Enable clickable links to new tab (default for all accounts)

Non-Demo Account Default Settings

• with_code: false - Hide SDK tabs
• with_url: false - Hide URL tab
• popup: true - Enable clickable links to new tab (default for all accounts)
• Results in simple embedded image/video, still clickable to open the full-size asset

Disabling Popup on Non-Demo Accounts

popup now defaults to true for every account. Pass popup:false explicitly to disable the clickable link:

Examples

Default popup behavior for non-demo URLs

No code shown, but popup is true:

Blocking popup behavior for non-demo URLs

Pass popup:false in your code - no need to pass with_code:false or with_url:false:

Resulting thumbnail:

Multi Widget Examples

The multi widget allows manual specification of code for each tab instead of automatic generation, while maintaining the same UI features (version selectors, copy buttons, syntax highlighting, etc.).

Backend API Code Example

Upload API call with responsive breakpoints across multiple SDKs:

SDK Configuration Example

Configuration code across all supported SDKs:

Use Cases for Multi Widget

1. Backend API Documentation: Upload/Admin/Provisioning API calls with cURL and CLI examples
2. Unsupported Features: Manual code specification when the automatic code generator doesn't support new parameters
3. Blog Posts and Early Documentation: Documenting features before full widget support is available

Testing Checklist

When testing code widgets, verify:

• [ ] All transformation types render correctly
• [ ] Widget UI options function as expected
• [ ] Account-specific behavior works properly
• [ ] Multi widget displays correctly across all SDK tabs
• [ ] Copy-to-clipboard functionality works
• [ ] Version selectors operate correctly
• [ ] Syntax highlighting is applied
• [ ] Embedded thumbnails display properly
• [ ] Links open correctly (when enabled)

Known Issues

1. Image-to-Video Widget: Not outputting thumbnail video when base asset is an image
2. Framework Order: Tab order follows content_renderer configuration, not the order specified in frameworks option

---

This document is for internal use and should be updated as the content renderer system evolves.