Blog posts by Vipin Banka | Learnings & Insights2026-07-08T03:20:06.0000000Zhttps://world.optimizely.com/blogs/vipin-banka--learnings--insights/ Optimizely World Optimizely Content JS SDK v2.1.0 — What's New and Why It Matters<p>&nbsp;</p> <p>v2.1.0 of the Optimizely Content JS SDK and CLI landed on July 7, 2026. This is a substantial release bringing a wave of capabilities for developers building headless experiences on Optimizely CMS SaaS &mdash; including content type contracts, programmatic application management, a new project scaffolding command, and OpenTelemetry observability.</p> <p>Alongside these major features, the release addresses critical stability fixes that resolve key edge cases in content fetching, previews, and routing. Below is a deep dive into what has changed, why these updates matter, and how they improve your development workflow.</p> <hr /> <h2>Content Type Sprawl and the New Contract Enhancements</h2> <p>If you've been building with the SDK for a while, you've probably felt this. Your content model grows. You have a Blog content type, a News Article, a Press Release. They're different types, but they share a bunch of the same properties &mdash; <strong>category</strong>, <strong>tags</strong>, <strong>author</strong>, <strong>publishedDate</strong>. So you define those properties three separate times across three separate <strong>contentType()</strong> calls. Then a product manager asks you to add a region field to all of them, and you make the same change in three places and hope you didn't miss one.</p> <p>While you could previously declare shared interfaces, <strong>v2.1.0 introduces major enhancements to how the SDK handles content type contracts</strong> at runtime to eliminate this duplicate work:</p> <ul class="tight"> <li> <p><strong>Allowed and restricted types on contracts</strong> &mdash; specify exactly which content types can or must implement a contract</p> </li> <li> <p><strong>Automatic GraphQL fragment generation</strong> &mdash; when you query a contracted type, the SDK auto-generates the correct inline fragments so all implementing types return their contracted fields without manual query writing</p> </li> <li> <p><strong>Component fallback mechanism</strong> &mdash; if a content item implements a contract but you haven't registered a specific React component for that particular type, the SDK now falls back to a contract-level component rather than rendering nothing. Silent blank renders caused by missing component registrations were a real source of confusion &mdash; this addresses that.</p> </li> </ul> <p>On the CLI side, the <strong>pull</strong> command now generates and validates contract definitions as part of your code generation step. One sync, and your contracts are in code.</p> <p><a href="https://github.com/episerver/content-js-sdk/pull/292"><em>CMS-46677, PR #292</em></a></p> <hr /> <h2>Programmatic Application Management via CLI</h2> <p><strong>The Context: </strong>The SDK and CLI provide a highly automated workflow for managing content types in code, but CMS applications (the configuration mapping your frontend hostnames to CMS start pages) historically required manual configuration in the CMS admin UI.</p> <p>For teams running multiple environments (Development, Staging, Production) or spinning up ephemeral environments for feature branches, this manual step was a deployment bottleneck. If a team member created an environment, they had to manually configure the application in the UI or routing wouldn't resolve. It wasn't version-controlled, automated, or easily reproducible.</p> <p><strong>The Solution: </strong>v2.1.0 introduces full <strong>application type definitions and validation</strong> to the SDK and exposes three new programmatic management commands in the CLI:</p> <pre class="code-block"><code class="language-bash">cms-cli createApplication # Create a new CMS application programmatically cms-cli updateApplication # Update an existing application's configuration cms-cli checkApplications # Validate registered applications against your local config</code></pre> <p><em class="far4bl _667h42">**Refer to the <a class="_667h42 _1l4j4nad _1c9dtv3 _1by2b93 _1140xq1 _667h42" href="https://docs.developers.optimizely.com/content-management-system/v1.0.0-CMS-SaaS/docs/configure-javascript-sdk">official CLI documentation</a>&nbsp;for exact command syntax and options.</em></p> <p>Your application configuration can now live in code with the rest of your schema. For teams running automated CI/CD pipelines, this closes a significant orchestration gap.</p> <p><a href="https://github.com/episerver/content-js-sdk/pull/333"><em>CMS-51342, PR #333</em></a></p> <hr /> <h2>A Seamless Editing Experience with NextPreviewComponent</h2> <p><strong>The Context:</strong>In headless setups, keeping the live preview fast and interactive is critical for content editors. However, standard preview routing setups in Next.js App Router projects often triggered full page reloads upon saving content drafts in the CMS. Editors had to wait for the entire route to re-render and often lost their scroll position or current tab context.</p> <p><strong>The Solution:</strong>v2.1.0 ships the <strong>NextPreviewComponent</strong>, a preview component specifically optimized for the Next.js App Router rendering lifecycle:</p> <ul class="tight"> <li> <p><strong>Optimized save-event listener</strong> &mdash; hooks into the content-saved webhook efficiently to detect draft saves immediately without polling</p> </li> <li> <p><strong>Soft refresh support</strong> &mdash; updates draft content on-screen in place. The editor sees their changes reflect instantly without a full browser reload or losing scroll position</p> </li> </ul> <p>This significantly reduces the friction of the editorial feedback loop, making visual editing in CMS SaaS feel smooth and instant.</p> <p><a href="https://github.com/episerver/content-js-sdk/pull/319"><em>CMS-52407, PR #319</em></a></p> <hr /> <h2>Observability Built In: OpenTelemetry Support</h2> <p><strong>The Context: </strong>Performance tuning in decoupled architectures is notoriously difficult. If a page load feels laggy, it can be hard to identify whether the delay is happening during client-side hydration, SDK query construction, network latency to Optimizely Graph, or <span class="far4bl _667h42">the query processing time within Optimizely Graph</span>. Without deep instrumentation, developers are left guessing or manually wrapping every&nbsp;<strong>getContentByPath()</strong> call in custom tracing blocks.</p> <p><strong>The Solution: </strong>The SDK now features native <strong>OpenTelemetry (OTEL) tracing and metrics</strong>. If your hosting environment or application infrastructure runs an OTEL-compatible collector (such as Datadog, New Relic, Honeycomb, Grafana, or Jaeger), the SDK's fetch layer will automatically emit trace spans.</p> <p>You can now natively profile the duration of your content queries, see exactly how long Optimizely Graph takes to respond, and spot any nested reference fetches that are impacting your latency budget.</p> <p><a href="https://github.com/episerver/content-js-sdk/pull/309"><em>CMS-50199, PR #309</em></a></p> <hr /> <h2>Getting Started Faster with create-opti-app</h2> <p><strong>The Context: </strong>Historically, starting a new project on CMS SaaS required cloning a complete demo repository, stripping out demo content and styling, configuring environment variables from scratch, and adjusting boilerplates. It lacked a lightweight, standardized onboarding command.</p> <p><strong>The Solution: </strong>The CLI now features a dedicated onboarding and scaffolding utility:</p> <pre class="code-block"><code class="language-bash">npx @optimizely/cms-cli@latest create-opti-app</code></pre> <p>This utility lets you quickly scaffold a clean, working project from three officially maintained starter templates:</p> <ul class="tight"> <li> <p><strong>Stride</strong> &mdash; The modern recommended starter preconfigured for Visual Builder</p> </li> <li> <p><strong>Alloy</strong> &mdash; The classic Optimizely demonstration site</p> </li> <li> <p><strong>TanStack</strong> &mdash; TanStack Router + React for projects opting out of Next.js</p> </li> </ul> <p>These templates are maintained alongside the core SDK, ensuring they stay aligned with the latest framework best practices.</p> <p><a href="https://github.com/episerver/content-js-sdk/pull/382"><em>CMS-49618, PR #382</em></a></p> <hr /> <h2>Key Stability and Bug Fixes</h2> <p>Behind the major feature updates, v2.1.0 delivers key bug fixes addressing critical routing, caching, and serialization edge cases.</p> <h3>Correcting getContent() Versioning Behavior</h3> <p><strong>The Problem:</strong> In certain configurations, the <strong>getContent()</strong> method (which retrieves a content item by its programmatic ID) was returning the&nbsp;<strong>draft version</strong> of a page or block to anonymous public visitors rather than the active published version. If an editor had an in-progress draft saved in the CMS, those unapproved changes <span class="far4bl _667h42">could unintentionally appear on the live website</span>.</p> <p><strong>The Fix:</strong> The SDK has been corrected to ensure <strong>getContent()</strong> strictly returns the published version of content for public delivery, safeguarding editorial workflows.</p> <p><a href="https://github.com/episerver/content-js-sdk/pull/307"><em>CMS-52026, PR #307</em></a></p> <hr /> <h3>Resolving getContentByPath() 404s on Simple Addresses</h3> <p><strong>The Problem:</strong> Optimizely CMS allows editors to assign a "simple address" to any page (e.g., a short URL alias like <strong>/about</strong> instead of a long hierarchical path). When a page used a simple address, <strong>getContentByPath()</strong> was throwing a 404 error, breaking routing for pages where custom slugs had been configured.</p> <p><strong>The Fix:</strong> Path-resolution logic has been updated to correctly resolve pages using CMS simple addresses, ensuring routing works smoothly across all customized URLs.</p> <p><a href="https://github.com/episerver/content-js-sdk/pull/312"><em>CMS-52209, PR #312</em></a></p> <hr /> <h3>Resolving Empty DAM Asset References in Compositions</h3> <p><strong>The Problem:</strong> When assets from Digital Asset Management (DAM) systems were referenced inside Visual Builder compositions (experiences structured using rows, columns, and sections), the returned fields occasionally resolved as <strong>null</strong>&nbsp;or empty. The query was executing successfully, but the auto-generated GraphQL query was missing the necessary inline fragments to serialize the nested DAM properties.</p> <p><strong>The Fix:</strong> The query generator has been updated to guarantee proper DAM asset fragment resolution inside experience compositions.</p> <p><a href="https://github.com/episerver/content-js-sdk/pull/318"><em>CMS-52404, PR #318</em></a></p> <hr /> <h3>Circular Reference Support in Code Generation</h3> <p><strong>The Problem:</strong> In complex content models, types frequently reference each other circularly (for example, a <strong>Category</strong> type containing a <strong>parentCategory</strong> property of type <strong>Category</strong>, or a <strong>MenuItem</strong> pointing to child <strong>MenuItems</strong>). When the CLI encountered these models, the code generator would enter an infinite loop or fail to compile the output.</p> <p><strong>The Fix:</strong> Both the SDK and CLI have been updated to support circular and self-referential content types by outputting string-based type references at the boundary of a detected cycle, allowing code generation to compile cleanly.</p> <p><em><a href="https://github.com/episerver/content-js-sdk/pull/409">SDK: CMS-53737, PR #409 </a>&middot; <a href="https://github.com/episerver/content-js-sdk/pull/305">CLI: CMS-44353, PR #305</a></em></p> <hr /> <h3>Consistent RichText HTML Entity Decoding</h3> <p><strong>The Problem:</strong> Certain encoded HTML entities (such as non-breaking spaces <strong>&amp;nbsp;</strong>, em dashes <strong>&amp;ndash;</strong>, or custom characters) inside <strong>RichText</strong> properties were decoded inconsistently, sometimes rendering raw entity markup directly to the page.</p> <p><strong>The Fix:</strong> The entity decoding logic inside the <strong>RichText</strong> parser has been standardized to ensure consistent rendering across all HTML entities.</p> <p><a href="https://github.com/episerver/content-js-sdk/pull/353"><em>CMS-53226, PR #353</em></a></p> <hr /> <h3>Preview Mode: Synchronized Element Focus and Attributes</h3> <p><strong>The Problem:</strong> In preview mode, two visual editing issues impacted the editor experience:</p> <ol class="tight"> <li> <p>Selecting an element in the Visual Builder sidebar didn't reliably focus or highlight that corresponding element inside the live iframe.</p> </li> <li> <p>Visual editing attributes (<strong>data-epi-*</strong> metadata) were missing from custom <strong>OptimizelyComposition</strong> and <strong>OptimizelyGridSection</strong> wrappers, rendering some on-page edit boundaries inactive.</p> </li> </ol> <p><strong>The Fix:</strong> The preview attribute delivery and sidebar communication have been fully synchronized. On-page edit boundaries now map perfectly to the visual structure, and sidebar element selections correctly shift iframe focus.</p> <p><em><a href="https://github.com/episerver/content-js-sdk/pull/346">Focus: CMS-52749, PR #346 </a>&middot; <a href="https://github.com/episerver/content-js-sdk/pull/393">Attributes: CMS-53437, PR #393</a></em></p> <hr /> <h3>Fallback Resolution for types ending in "...Property"</h3> <p><strong>The Problem:</strong> If a custom content type name ended with the suffix <strong>"Property"</strong> (e.g., <strong>HeroImageProperty</strong>, the component registry's fallback resolver incorrectly classified it as a system property type rather than a content element, failing to resolve a fallback component.</p> <p><strong>The Fix:</strong> The matching algorithms have been refined to ensure custom content types ending in "Property" correctly evaluate and resolve fallback layouts.</p> <p><a href="https://github.com/episerver/content-js-sdk/pull/304"><em>CMS-51995, PR #304</em></a></p> <hr /> <h2>Additional Improvements</h2> <table style="border-collapse: collapse; border-width: 1px; border-spacing: 5px; border-style: solid;"> <tbody> <tr> <td style="border-style: solid; border-width: 1px; text-align: left; vertical-align: top; padding: 1px;"> <p><strong>Change</strong></p> </td> <td style="border-style: solid; border-width: 1px; text-align: left; vertical-align: top; padding: 1px;"> <p><strong>Problem</strong></p> </td> <td style="border-style: solid; border-width: 1px; text-align: left; vertical-align: top; padding: 1px;"> <p><strong>Solution</strong></p> </td> </tr> <tr> <td style="border-style: solid; border-width: 1px; text-align: left; vertical-align: top; padding: 1px;"> <p><strong>Base type properties in queries</strong></p> <p><strong><a href="https://github.com/episerver/content-js-sdk/pull/392">CMS-41847, PR #392</a></strong></p> </td> <td style="border-style: solid; border-width: 1px; text-align: left; vertical-align: top; padding: 1px;"> <p>Some inherited base type fields were missing from auto-generated GraphQL queries, requiring manual query extensions</p> </td> <td style="border-style: solid; border-width: 1px; text-align: left; vertical-align: top; padding: 1px;"> <p>All base type properties are now automatically included</p> </td> </tr> <tr> <td style="border-style: solid; border-width: 1px; text-align: left; vertical-align: top; padding: 1px;"> <p><strong>Locale on ContentType</strong></p> <p><strong><a href="https://github.com/episerver/content-js-sdk/pull/400">CMS-53704, PR #400</a></strong></p> </td> <td style="border-style: solid; border-width: 1px; text-align: left; vertical-align: top; padding: 1px;"> <p>No way to specify locale at the type definition level for multilingual setups</p> </td> <td style="border-style: solid; border-width: 1px; text-align: left; vertical-align: top; padding: 1px;"> <p><strong>ContentType</strong> and <strong>RICHTEXT_PRESET</strong> now accept an optional <strong>locale</strong> parameter</p> </td> </tr> <tr> <td style="border-style: solid; border-width: 1px; text-align: left; vertical-align: top; padding: 1px;"> <p><strong>Section fragments in compositions</strong></p> <p><strong><a href="https://github.com/episerver/content-js-sdk/pull/388">CMS-53436, PR #388</a></strong></p> </td> <td style="border-style: solid; border-width: 1px; text-align: left; vertical-align: top; padding: 1px;"> <p>Sections inside Visual Builder experiences didn't generate proper GraphQL fragments</p> </td> <td style="border-style: solid; border-width: 1px; text-align: left; vertical-align: top; padding: 1px;"> <p>Section fragment handling added to <strong>OptimizelyComposition</strong></p> </td> </tr> <tr> <td style="border-style: solid; border-width: 1px; text-align: left; vertical-align: top; padding: 1px;"> <p><strong>Display template for experiences</strong></p> <p><strong><a href="https://github.com/episerver/content-js-sdk/pull/335">CMS-52750, PR #335</a></strong></p> </td> <td style="border-style: solid; border-width: 1px; text-align: left; vertical-align: top; padding: 1px;"> <p>Top-level experience content didn't respect its assigned display template</p> </td> <td style="border-style: solid; border-width: 1px; text-align: left; vertical-align: top; padding: 1px;"> <p>Display template resolution now works for top-level experiences</p> </td> </tr> <tr> <td style="border-style: solid; border-width: 1px; text-align: left; vertical-align: top; padding: 1px;"> <p><strong>Type re-exports</strong></p> <p><strong><a href="https://github.com/episerver/content-js-sdk/pull/405">CMS-53656, PR #405</a></strong></p> </td> <td style="border-style: solid; border-width: 1px; text-align: left; vertical-align: top; padding: 1px;"> <p>Missing re-exports caused broken <strong>.d.ts</strong> declaration files in consuming projects</p> </td> <td style="border-style: solid; border-width: 1px; text-align: left; vertical-align: top; padding: 1px;"> <p>Type re-exports added for proper declaration file generation</p> </td> </tr> <tr> <td style="border-style: solid; border-width: 1px; text-align: left; vertical-align: top; padding: 1px;"> <p><strong>Empty contracts config</strong></p> <p><strong><a href="https://github.com/episerver/content-js-sdk/pull/342">CMS-52849, PR #342</a></strong></p> </td> <td style="border-style: solid; border-width: 1px; text-align: left; vertical-align: top; padding: 1px;"> <p>Passing an empty contracts array in config threw an error</p> </td> <td style="border-style: solid; border-width: 1px; text-align: left; vertical-align: top; padding: 1px;"> <p>Empty contracts are now allowed without errors</p> </td> </tr> <tr> <td style="border-style: solid; border-width: 1px; text-align: left; vertical-align: top; padding: 1px;"> <p><strong>Self-signed certificates (CLI)</strong></p> <p><strong><a href="https://github.com/episerver/content-js-sdk/pull/322">CMS-52494, PR #322</a></strong></p> </td> <td style="border-style: solid; border-width: 1px; text-align: left; vertical-align: top; padding: 1px;"> <p>CLI couldn't connect to CMS instances behind self-signed certs in dev/staging</p> </td> <td style="border-style: solid; border-width: 1px; text-align: left; vertical-align: top; padding: 1px;"> <p>Self-signed certificate support added</p> </td> </tr> <tr> <td style="border-style: solid; border-width: 1px; text-align: left; vertical-align: top; padding: 1px;"> <p><strong>RichText editor settings (CLI)</strong></p> <p><strong><a href="https://github.com/episerver/content-js-sdk/pull/348">CMS-52547, PR #348</a></strong></p> </td> <td style="border-style: solid; border-width: 1px; text-align: left; vertical-align: top; padding: 1px;"> <p>No way to configure editor settings for RichText properties via the CLI</p> </td> <td style="border-style: solid; border-width: 1px; text-align: left; vertical-align: top; padding: 1px;"> <p>Editor settings for RichText are now supported</p> </td> </tr> <tr> <td style="border-style: solid; border-width: 1px; text-align: left; vertical-align: top; padding: 1px;"> <p><strong>Duplicate applications (CLI)</strong></p> <p><strong><a href="https://github.com/episerver/content-js-sdk/pull/403">CMS-53768, PR #403</a></strong></p> </td> <td style="border-style: solid; border-width: 1px; text-align: left; vertical-align: top; padding: 1px;"> <p>CLI threw errors when multiple applications shared entry points or had missing entry points</p> </td> <td style="border-style: solid; border-width: 1px; text-align: left; vertical-align: top; padding: 1px;"> <p>Duplicate handling and missing entry point filtering added</p> </td> </tr> <tr> <td style="border-style: solid; border-width: 1px; text-align: left; vertical-align: top; padding: 1px;"> <p><strong>Preview URL with inProcessWebsite (CLI)</strong></p> <p><strong><a href="https://github.com/episerver/content-js-sdk/pull/351">CMS-53120, PR #351</a></strong></p> </td> <td style="border-style: solid; border-width: 1px; text-align: left; vertical-align: top; padding: 1px;"> <p>Preview URLs didn't resolve correctly when using <strong>inProcessWebsite</strong></p> </td> <td style="border-style: solid; border-width: 1px; text-align: left; vertical-align: top; padding: 1px;"> <p>URL resolution logic fixed</p> </td> </tr> </tbody> </table> <p>&nbsp;</p> <hr /> <h2>How to Upgrade</h2> <pre class="code-block"><code class="language-bash"># Upgrade the SDK npm install @optimizely/cms-sdk@2.1.0 # Upgrade the CLI npm install -D @optimizely/cms-cli@2.1.0</code></pre> <p>There are no breaking changes in this release. Your existing <strong>contentType()</strong> schemas, registry configurations, and React component mappings continue to work without modification.</p> <hr /> <h2>Full Changelog</h2> <ul class="tight"> <li> <p><a href="https://github.com/episerver/content-js-sdk/releases/tag/%40optimizely%2Fcms-sdk%402.1.0"><strong>@optimizely/cms-sdk@2.1.0</strong></a></p> </li> <li> <p><a href="https://github.com/episerver/content-js-sdk/releases/tag/%40optimizely%2Fcms-cli%402.1.0"><strong>@optimizely/cms-cli@2.1.0</strong></a></p> </li> </ul> <p>&nbsp;</p> <p><strong><em class="far4bl _667h42">This post is a community-authored summary based on the&nbsp;<a class="_667h42 _1l4j4nad _1c9dtv3 _1by2b93 _1140xq1 _667h42" href="https://github.com/episerver/content-js-sdk/releases/tag/%40optimizely%2Fcms-sdk%402.1.0">official v2.1.0 release notes</a>. For authoritative guidance, always refer to the official Optimizely documentation.</em></strong></p>2026-07-08T03:20:06.0000000ZBlog post Exploring Asset Lifecycle Management Approaches for Bynder and Optimizely SaaS CMS<p><span class="far4bl _667h42">Note: This is Part 3 of our Bynder integration series. For setup and filtering prerequisites, see <a class="_667h42 _1l4j4nac _1c9dtv3 _1by2b93 _1140xq1 _667h42" href="/link/4f215cd334254dfcbc121d5f4e20edd6.aspx">Part 1</a>&nbsp;and&nbsp;<a class="_667h42 _1l4j4nac _1c9dtv3 _1by2b93 _1140xq1 _667h42" href="/link/30275ac47c4843148eeda8b7d6ed282a.aspx">Part 2</a>.</span></p> <h2><strong>Introduction</strong></h2> <p>In my previous article, I explored approaches for controlling asset ingestion from Bynder into Optimizely SaaS CMS through metadata-based filtering.</p> <p>Filtering assets before they enter the platform is an important first step, but in many enterprise DAM integrations, it only addresses part of the lifecycle.</p> <p>Once assets have been synchronized, a different set of challenges begins to emerge:</p> <ul> <li>What happens when an asset's metadata changes after synchronization?</li> <li>How should previously synchronized assets be handled when they no longer meet business rules?</li> <li>How can organizations govern assets across Development, Staging, and Production environments?</li> <li>How can teams safely determine whether an asset is still being used before removing it?</li> <li>When does it make sense to extend an existing integration versus building a completely custom connector?</li> </ul> <p>These questions gradually shift the conversation from asset synchronization to asset lifecycle management.</p> <p>This article explores some architectural considerations and potential approaches that may help address those challenges.</p> <hr /> <h2><strong>The Asset Lifecycle Challenge</strong></h2> <p>Synchronization is rarely a one-time event.&nbsp;Assets constantly evolve throughout their lifetime.&nbsp;<br />A typical lifecycle might look something like this:</p> <div class="___77lcry0 f10pi13n"> <div class="___1hewfwb f10pi13n f7oukh6 f5p0z4x"> <div class="fui-FluentProvider codeBlock-7100fui-FluentProviderr6av ___1jk74h0 fzk5nv6 f6n0el9 f7x6x6c f1a9mlr7 flj889f f13g0yyb ffzn0d2"> <div class="scriptor-component-code-block NhtKn7PZLzk24rduw4FJVQ== scriptor-codeblock-virtualized"> <div class="UkrLoQNicnNa5hsNIz3QLw== SpjJXGAclwYtfY+SokpSTg== ZF-Q2MvOY8aWSpGWW7iKRQ== anUhzybDvd7+8CBdKK7ukg=="> <div class="AHKpBuU8t+rAbDNImLlOHQ== lHY5JJVFnU8S-jx-OGwJkg== IUtI8YkF5Dl2LTlcjMDTwg=="> <div class="___149cboo fssjx5q f11d9hfk fj2zk3l fmyxm6j f1ldmben f1rkeeuc"> <div class="___svqwvq0 fssjx5q f11d9hfk fj2zk3l f1ldmben fzdgvog f19k5jia fzv833z f1r8x5cv f1687457 fe71wc6 f1wco4xj f103jgab f12fk6ok f4j985t fv86erk f1b4dd42 f1qwtq3x f13gvrpj f132if0v f1vblqk2 fkxsc7s f18j3zqo f1386a7m f1w3nze9 f14pe09c f4skf1h f1lq0dgc f1jgwha3 fbf5vau fc8703c"> <div class="___ysqij10 fonrc96 f1d3un5n fdk4ulh f1cijgmw fzb3wgo fssjx5q f11d9hfk fee5icb fr1uqzy"> <div class="___sv9ola0 fj2zk3l f1f4vkoj scriptor-instance-681"> <div class="scriptor-canvas scriptor-styled-scrollbar focus-container"> <div class="scriptor-pageContainer"> <div class="scriptor-pageFrame scriptor-firstPage scriptor-webView scriptor-content-visibility-auto"> <div class="scriptor-code-editor scriptor-code-wrap-on scriptor-pageBody scriptor-webViewPage"> <div class="scriptor-paragraph"><strong><span class="scriptor-textRun scriptor-inline">Asset Created&nbsp; &gt;&nbsp; </span><span class="scriptor-textRun scriptor-inline">Asset Synchronized&nbsp; &gt;&nbsp; </span><span class="scriptor-textRun scriptor-inline">Asset Referenced by Content&nbsp; &gt;&nbsp; Asset </span><span class="scriptor-textRun scriptor-inline">Metadata Updated&nbsp; &gt;&nbsp; </span><span class="scriptor-textRun scriptor-inline">Visibility Rules Changed&nbsp; &gt;&nbsp; </span><span class="scriptor-textRun scriptor-inline">Environment Assignment Changed&nbsp; &gt;&nbsp; </span><span class="scriptor-textRun scriptor-inline">Asset No Longer Valid</span></strong></div> <div class="scriptor-paragraph">&nbsp;</div> <div class="scriptor-paragraph">Most DAM integrations handle the first half of this journey very well.</div> <div class="scriptor-paragraph">The second half is often where complexity starts to appear.</div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <p>For example:</p> <ul> <li>An image may no longer belong to a target environment.</li> <li>An image may become hidden through metadata changes.</li> <li>An image may remain inside Optimizely despite no longer being available within Bynder.</li> <li>An image may still be actively referenced by content authors even though business rules indicate it should be removed.</li> </ul> <p>These scenarios introduce governance challenges that extend well beyond initial synchronization.</p> <hr /> <h2><strong>Orphaned Assets</strong></h2> <p>One scenario that stood out during evaluation was the possibility of orphaned assets.</p> <p>Consider the following sequence:</p> <div class="___77lcry0 f10pi13n"> <div class="___1hewfwb f10pi13n f7oukh6 f5p0z4x"> <div class="fui-FluentProvider codeBlock-6816fui-FluentProviderr6b8 ___1jk74h0 fzk5nv6 f6n0el9 f7x6x6c f1a9mlr7 flj889f f13g0yyb ffzn0d2"> <div class="scriptor-component-code-block NhtKn7PZLzk24rduw4FJVQ== scriptor-codeblock-virtualized"> <div class="UkrLoQNicnNa5hsNIz3QLw== SpjJXGAclwYtfY+SokpSTg== ZF-Q2MvOY8aWSpGWW7iKRQ== anUhzybDvd7+8CBdKK7ukg=="> <div class="AHKpBuU8t+rAbDNImLlOHQ== lHY5JJVFnU8S-jx-OGwJkg== IUtI8YkF5Dl2LTlcjMDTwg=="> <div class="___149cboo fssjx5q f11d9hfk fj2zk3l fmyxm6j f1ldmben f1rkeeuc"> <div class="___svqwvq0 fssjx5q f11d9hfk fj2zk3l f1ldmben fzdgvog f19k5jia fzv833z f1r8x5cv f1687457 fe71wc6 f1wco4xj f103jgab f12fk6ok f4j985t fv86erk f1b4dd42 f1qwtq3x f13gvrpj f132if0v f1vblqk2 fkxsc7s f18j3zqo f1386a7m f1w3nze9 f14pe09c f4skf1h f1lq0dgc f1jgwha3 fbf5vau fc8703c"> <div class="___ysqij10 fonrc96 f1d3un5n fdk4ulh f1cijgmw fzb3wgo fssjx5q f11d9hfk fee5icb fr1uqzy"> <div class="___sv9ola0 fj2zk3l f1f4vkoj scriptor-instance-682"> <div class="scriptor-canvas scriptor-styled-scrollbar focus-container"> <div class="scriptor-pageContainer"> <div class="scriptor-pageFrame scriptor-firstPage scriptor-webView scriptor-content-visibility-auto"> <div class="scriptor-code-editor scriptor-code-wrap-on scriptor-pageBody scriptor-webViewPage"> <div class="scriptor-paragraph"><strong><span class="scriptor-textRun scriptor-inline">Asset synchronized&nbsp; &gt;&nbsp; </span><span class="scriptor-textRun scriptor-inline">Metadata changes&nbsp; &gt;&nbsp; </span><span class="scriptor-textRun scriptor-inline">Asset moves out of scope&nbsp; &gt;&nbsp; </span><span class="scriptor-textRun scriptor-inline">Synchronization account </span><span class="scriptor-textRun scriptor-inline">can no longer access asset&nbsp; &gt;&nbsp; </span><span class="scriptor-textRun scriptor-inline">Asset remains in Optimizely</span></strong></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <p>From the perspective of the synchronization process, the asset has effectively disappeared.</p> <p>The integration can no longer retrieve information about the asset.</p> <p>However, the existing record may continue to exist inside Optimizely.</p> <p>Over time, these records could accumulate, creating a divergence between the source DAM and the target CMS repository.</p> <p>While this may not create an immediate problem, organizations with large asset libraries may eventually start asking:</p> <ul> <li>Which assets are still valid?</li> <li>Which assets should still exist?</li> <li>Which assets are no longer governed by the current synchronization rules?</li> </ul> <p>These questions become increasingly important as repositories grow.</p> <hr /> <h2><strong>Environment Governance</strong></h2> <p>Another consideration involves environment ownership.</p> <p>Most enterprise implementations maintain separate environments:</p> <div class="___77lcry0 f10pi13n"> <div class="___1hewfwb f10pi13n f7oukh6 f5p0z4x"> <div class="fui-FluentProvider codeBlock-1565fui-FluentProviderr6bh ___1jk74h0 fzk5nv6 f6n0el9 f7x6x6c f1a9mlr7 flj889f f13g0yyb ffzn0d2"> <div class="scriptor-component-code-block NhtKn7PZLzk24rduw4FJVQ== scriptor-codeblock-virtualized"> <div class="UkrLoQNicnNa5hsNIz3QLw== SpjJXGAclwYtfY+SokpSTg== ZF-Q2MvOY8aWSpGWW7iKRQ== anUhzybDvd7+8CBdKK7ukg=="> <div class="AHKpBuU8t+rAbDNImLlOHQ== lHY5JJVFnU8S-jx-OGwJkg== IUtI8YkF5Dl2LTlcjMDTwg=="> <div class="___149cboo fssjx5q f11d9hfk fj2zk3l fmyxm6j f1ldmben f1rkeeuc"> <div class="___svqwvq0 fssjx5q f11d9hfk fj2zk3l f1ldmben fzdgvog f19k5jia fzv833z f1r8x5cv f1687457 fe71wc6 f1wco4xj f103jgab f12fk6ok f4j985t fv86erk f1b4dd42 f1qwtq3x f13gvrpj f132if0v f1vblqk2 fkxsc7s f18j3zqo f1386a7m f1w3nze9 f14pe09c f4skf1h f1lq0dgc f1jgwha3 fbf5vau fc8703c"> <div class="___ysqij10 fonrc96 f1d3un5n fdk4ulh f1cijgmw fzb3wgo fssjx5q f11d9hfk fee5icb fr1uqzy"> <div class="___sv9ola0 fj2zk3l f1f4vkoj scriptor-instance-683"> <div class="scriptor-canvas scriptor-styled-scrollbar focus-container"> <div class="scriptor-pageContainer"> <div class="scriptor-pageFrame scriptor-firstPage scriptor-webView scriptor-content-visibility-auto"> <div class="scriptor-code-editor scriptor-code-wrap-on scriptor-pageBody scriptor-webViewPage"> <div class="scriptor-paragraph"> <ul> <li><span class="scriptor-textRun scriptor-inline">Development</span></li> <li>Staging</li> <li>Production</li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <p>However, DAM platforms are often centrally managed.</p> <p>A common scenario looks something like this:</p> <p><img style="border-width: 1px; border-style: solid;" src="/link/4c2f0e70051d44828bb2530d6be7e584.aspx" alt="" width="722" height="482" /></p> <p>Without additional controls, all environments may receive identical assets.</p> <p>This can introduce several concerns:</p> <ul> <li>Increased storage consumption</li> <li>Cluttered non-production environments</li> <li>Difficult testing scenarios</li> <li>Confusion around environment-specific assets</li> </ul> <h3><strong>Suggested Environment Metadata Approach</strong></h3> <p>One possible approach is introducing an additional metadata property or use tags inside Bynder.</p> <p>Example:</p> <p><span class="scriptor-textRun scriptor-inline">"website-environment" metadata property with p</span>ossible values:</p> <div class="___77lcry0 f10pi13n"> <div class="___1hewfwb f10pi13n f7oukh6 f5p0z4x"> <div class="fui-FluentProvider codeBlock-9217fui-FluentProviderr6cc ___1jk74h0 fzk5nv6 f6n0el9 f7x6x6c f1a9mlr7 flj889f f13g0yyb ffzn0d2"> <div class="scriptor-component-code-block NhtKn7PZLzk24rduw4FJVQ== scriptor-codeblock-virtualized"> <div class="UkrLoQNicnNa5hsNIz3QLw== SpjJXGAclwYtfY+SokpSTg== ZF-Q2MvOY8aWSpGWW7iKRQ== anUhzybDvd7+8CBdKK7ukg=="> <div class="AHKpBuU8t+rAbDNImLlOHQ== lHY5JJVFnU8S-jx-OGwJkg== IUtI8YkF5Dl2LTlcjMDTwg=="> <div class="___149cboo fssjx5q f11d9hfk fj2zk3l fmyxm6j f1ldmben f1rkeeuc"> <div class="___svqwvq0 fssjx5q f11d9hfk fj2zk3l f1ldmben fzdgvog f19k5jia fzv833z f1r8x5cv f1687457 fe71wc6 f1wco4xj f103jgab f12fk6ok f4j985t fv86erk f1b4dd42 f1qwtq3x f13gvrpj f132if0v f1vblqk2 fkxsc7s f18j3zqo f1386a7m f1w3nze9 f14pe09c f4skf1h f1lq0dgc f1jgwha3 fbf5vau fc8703c"> <div class="___ysqij10 fonrc96 f1d3un5n fdk4ulh f1cijgmw fzb3wgo fssjx5q f11d9hfk fee5icb fr1uqzy"> <div class="___sv9ola0 fj2zk3l f1f4vkoj scriptor-instance-686"> <div class="scriptor-canvas scriptor-styled-scrollbar focus-container"> <div class="scriptor-pageContainer"> <div class="scriptor-pageFrame scriptor-firstPage scriptor-webView scriptor-content-visibility-auto"> <div class="scriptor-code-editor scriptor-code-wrap-on scriptor-pageBody scriptor-webViewPage"> <ul> <li class="scriptor-paragraph"><span class="scriptor-textRun scriptor-inline">Development</span></li> <li class="scriptor-paragraph"><span class="scriptor-textRun scriptor-inline">Staging</span></li> <li class="scriptor-paragraph"><span class="scriptor-textRun scriptor-inline">Production</span></li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <p>This metadata could travel alongside normal asset synchronization and provide additional governance information to downstream systems.</p> <h4><strong>Suggested Visibility Configuration</strong></h4> <p>Unlike visibility-based filtering rules, this property/tags does not need to setup separate profiles/users and any explicit filtering rules.</p> <p>The goal is not to hide assets. The goal is to communicate intent.</p> <div class="___77lcry0 f10pi13n"> <div class="___1hewfwb f10pi13n f7oukh6 f5p0z4x"> <div class="fui-FluentProvider codeBlock-2862fui-FluentProviderr6cu ___1jk74h0 fzk5nv6 f6n0el9 f7x6x6c f1a9mlr7 flj889f f13g0yyb ffzn0d2"> <div class="scriptor-component-code-block NhtKn7PZLzk24rduw4FJVQ== scriptor-codeblock-virtualized"> <div class="UkrLoQNicnNa5hsNIz3QLw== SpjJXGAclwYtfY+SokpSTg== ZF-Q2MvOY8aWSpGWW7iKRQ== anUhzybDvd7+8CBdKK7ukg=="> <div class="AHKpBuU8t+rAbDNImLlOHQ== lHY5JJVFnU8S-jx-OGwJkg== IUtI8YkF5Dl2LTlcjMDTwg=="> <div class="___149cboo fssjx5q f11d9hfk fj2zk3l fmyxm6j f1ldmben f1rkeeuc"> <div class="___svqwvq0 fssjx5q f11d9hfk fj2zk3l f1ldmben fzdgvog f19k5jia fzv833z f1r8x5cv f1687457 fe71wc6 f1wco4xj f103jgab f12fk6ok f4j985t fv86erk f1b4dd42 f1qwtq3x f13gvrpj f132if0v f1vblqk2 fkxsc7s f18j3zqo f1386a7m f1w3nze9 f14pe09c f4skf1h f1lq0dgc f1jgwha3 fbf5vau fc8703c"> <div class="___ysqij10 fonrc96 f1d3un5n fdk4ulh f1cijgmw fzb3wgo fssjx5q f11d9hfk fee5icb fr1uqzy"> <div class="___sv9ola0 fj2zk3l f1f4vkoj scriptor-instance-688"> <div class="scriptor-canvas scriptor-styled-scrollbar focus-container"> <div class="scriptor-pageContainer"> <div class="scriptor-pageFrame scriptor-firstPage scriptor-webView scriptor-content-visibility-auto"> <div class="scriptor-code-editor scriptor-code-wrap-on scriptor-pageBody scriptor-webViewPage"> <div class="scriptor-paragraph">For example: If an asset that is tagged for development environment received in production environement then that asset should be treated as out of scope and vice versa for other environments.</div> <div class="scriptor-paragraph">&nbsp;</div> <div class="scriptor-paragraph">Asset target Environment: Development</div> <div class="scriptor-paragraph">Asset Synced in: Production</div> <div class="scriptor-paragraph">Result: Potentially Out of Scope</div> </div> <div class="scriptor-highlightWrapper">&nbsp;</div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="scriptor-paragraph"> <div>With this approach, a centralized DAM repository can continue serving multiple environments while still supporting environment-specific governance decisions.</div> </div> </div> </div> </div> </div> <hr /> <h2><strong>Why Environment Metadata May Be Valuable</strong></h2> <p>Without environment metadata, every environment receives same assets.</p> <p>With environment metadata, environment validation processes can be setup to stop storing assets those are not required in the environment.</p> <p>This approach may provide a lightweight governance layer without introducing separate DAM repositories, separate taxonomies, or separate synchronization configurations.</p> <hr /> <h2><strong>Architectural Note</strong></h2> <p>The workflow described in the following sections represents an architectural approach that emerged during the evaluation of lifecycle management challenges associated with large-scale DAM integrations.</p> <p>While the individual platform capabilities required for this model&mdash;including Bynder webhooks, permanent access tokens, Optimizely Graph/Content Management APIs, and Optimizely Graph reference queries&mdash; are available today, the complete end-to-end workflow has not yet been fully validated in a production implementation.</p> <p>The intent of this article is to explore a potential governance pattern and discuss its trade-offs rather than present a proven production architecture.</p> <hr /> <h2><strong>Exploring an Event-Driven Governance Model</strong></h2> <p>One approach that appears interesting from an architectural perspective is introducing a webhook-driven governance workflow.</p> <p>For simplicity, this article assumes the webhook endpoint is deployed inside the frontend nextjs application.</p> <p>In practice, the webhook could be hosted anywhere:</p> <ul> <li>Next.js API Route</li> <li>Azure Function</li> <li>AWS Lambda</li> <li>Google Cloud Function</li> <li>Dedicated Middleware Service</li> <li>Integration Platform</li> </ul> <p>The location itself is less important than the validation process being executed.</p> <p>At a high level:</p> <div class="___77lcry0 f10pi13n"> <div class="___1hewfwb f10pi13n f7oukh6 f5p0z4x"> <div class="fui-FluentProvider codeBlock-1675fui-FluentProviderr6dp ___1jk74h0 fzk5nv6 f6n0el9 f7x6x6c f1a9mlr7 flj889f f13g0yyb ffzn0d2"> <div class="scriptor-component-code-block NhtKn7PZLzk24rduw4FJVQ== scriptor-codeblock-virtualized"> <div class="UkrLoQNicnNa5hsNIz3QLw== SpjJXGAclwYtfY+SokpSTg== ZF-Q2MvOY8aWSpGWW7iKRQ== anUhzybDvd7+8CBdKK7ukg=="> <div class="AHKpBuU8t+rAbDNImLlOHQ== lHY5JJVFnU8S-jx-OGwJkg== IUtI8YkF5Dl2LTlcjMDTwg=="> <div class="___149cboo fssjx5q f11d9hfk fj2zk3l fmyxm6j f1ldmben f1rkeeuc"> <div class="___svqwvq0 fssjx5q f11d9hfk fj2zk3l f1ldmben fzdgvog f19k5jia fzv833z f1r8x5cv f1687457 fe71wc6 f1wco4xj f103jgab f12fk6ok f4j985t fv86erk f1b4dd42 f1qwtq3x f13gvrpj f132if0v f1vblqk2 fkxsc7s f18j3zqo f1386a7m f1w3nze9 f14pe09c f4skf1h f1lq0dgc f1jgwha3 fbf5vau fc8703c"> <div class="___ysqij10 fonrc96 f1d3un5n fdk4ulh f1cijgmw fzb3wgo fssjx5q f11d9hfk fee5icb fr1uqzy"> <div class="___sv9ola0 fj2zk3l f1f4vkoj scriptor-instance-691"> <div class="scriptor-canvas scriptor-styled-scrollbar focus-container"> <div class="scriptor-pageContainer"> <div class="scriptor-pageFrame scriptor-firstPage scriptor-webView scriptor-content-visibility-auto"> <div class="scriptor-code-editor scriptor-code-wrap-on scriptor-pageBody scriptor-webViewPage"> <div class="scriptor-paragraph"><strong><span class="scriptor-textRun scriptor-inline">Bynder Calls Webhook&nbsp; &gt;&nbsp; </span><span class="scriptor-textRun scriptor-inline">Webhook Receives event&nbsp; &gt;&nbsp; </span><span class="scriptor-textRun scriptor-inline">Validation Logic&nbsp; &gt;&nbsp; Asset remains or Deleted</span></strong></div> <div class="scriptor-paragraph">&nbsp;</div> <div class="scriptor-paragraph"><strong><span class="scriptor-textRun scriptor-inline"><img style="border-width: 1px; border-style: solid;" src="/link/6924927432474ebbbf0173898da1d109.aspx?1783236197175" width="575" height="699" /></span></strong></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="___77lcry0 f10pi13n"> <div class="___1hewfwb f10pi13n f7oukh6 f5p0z4x"> <div class="fui-FluentProvider codeBlock-1955fui-FluentProviderr6e2 ___1jk74h0 fzk5nv6 f6n0el9 f7x6x6c f1a9mlr7 flj889f f13g0yyb ffzn0d2"> <div class="scriptor-component-code-block NhtKn7PZLzk24rduw4FJVQ== scriptor-codeblock-virtualized"> <div class="UkrLoQNicnNa5hsNIz3QLw== SpjJXGAclwYtfY+SokpSTg== ZF-Q2MvOY8aWSpGWW7iKRQ== anUhzybDvd7+8CBdKK7ukg=="> <div class="AHKpBuU8t+rAbDNImLlOHQ== lHY5JJVFnU8S-jx-OGwJkg== IUtI8YkF5Dl2LTlcjMDTwg=="> <div class="___149cboo fssjx5q f11d9hfk fj2zk3l fmyxm6j f1ldmben f1rkeeuc"> <div class="___svqwvq0 fssjx5q f11d9hfk fj2zk3l f1ldmben fzdgvog f19k5jia fzv833z f1r8x5cv f1687457 fe71wc6 f1wco4xj f103jgab f12fk6ok f4j985t fv86erk f1b4dd42 f1qwtq3x f13gvrpj f132if0v f1vblqk2 fkxsc7s f18j3zqo f1386a7m f1w3nze9 f14pe09c f4skf1h f1lq0dgc f1jgwha3 fbf5vau fc8703c"> <div class="___ysqij10 fonrc96 f1d3un5n fdk4ulh f1cijgmw fzb3wgo fssjx5q f11d9hfk fee5icb fr1uqzy"> <div class="___sv9ola0 fj2zk3l f1f4vkoj scriptor-instance-692"> <div class="scriptor-canvas scriptor-styled-scrollbar focus-container"> <div class="scriptor-pageContainer"> <div class="scriptor-pageFrame scriptor-firstPage scriptor-webView scriptor-content-visibility-auto">&nbsp;</div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="scriptor-code-scroll-proxy"> <h2><strong>Three Gates</strong></h2> </div> </div> </div> </div> </div> <h3><strong>Gate 1: Visibility Validation</strong></h3> <p>The first validation stage could determine whether the asset remains visible to the synchronization account.<br />Note: Use permanent token assigned for the synchronization account.</p> <p>Conceptually:</p> <div class="___77lcry0 f10pi13n"> <div class="___1hewfwb f10pi13n f7oukh6 f5p0z4x"> <div class="fui-FluentProvider codeBlock-2459fui-FluentProviderr6eb ___1jk74h0 fzk5nv6 f6n0el9 f7x6x6c f1a9mlr7 flj889f f13g0yyb ffzn0d2"> <div class="scriptor-component-code-block NhtKn7PZLzk24rduw4FJVQ== scriptor-codeblock-virtualized"> <div class="UkrLoQNicnNa5hsNIz3QLw== SpjJXGAclwYtfY+SokpSTg== ZF-Q2MvOY8aWSpGWW7iKRQ== anUhzybDvd7+8CBdKK7ukg=="> <div class="AHKpBuU8t+rAbDNImLlOHQ== lHY5JJVFnU8S-jx-OGwJkg== IUtI8YkF5Dl2LTlcjMDTwg=="> <div class="___149cboo fssjx5q f11d9hfk fj2zk3l fmyxm6j f1ldmben f1rkeeuc"> <div class="___svqwvq0 fssjx5q f11d9hfk fj2zk3l f1ldmben fzdgvog f19k5jia fzv833z f1r8x5cv f1687457 fe71wc6 f1wco4xj f103jgab f12fk6ok f4j985t fv86erk f1b4dd42 f1qwtq3x f13gvrpj f132if0v f1vblqk2 fkxsc7s f18j3zqo f1386a7m f1w3nze9 f14pe09c f4skf1h f1lq0dgc f1jgwha3 fbf5vau fc8703c"> <div class="___ysqij10 fonrc96 f1d3un5n fdk4ulh f1cijgmw fzb3wgo fssjx5q f11d9hfk fee5icb fr1uqzy"> <div class="___sv9ola0 fj2zk3l f1f4vkoj scriptor-instance-693"> <div class="scriptor-canvas scriptor-styled-scrollbar focus-container"> <div class="scriptor-pageContainer"> <div class="scriptor-pageFrame scriptor-firstPage scriptor-webView scriptor-content-visibility-auto"> <div class="scriptor-code-editor scriptor-code-wrap-on scriptor-pageBody scriptor-webViewPage"> <div class="scriptor-paragraph"><span class="scriptor-textRun scriptor-inline">Asset Updated&nbsp; &gt;&nbsp; </span><span class="scriptor-textRun scriptor-inline">Retrieve Asset&nbsp; &gt;&nbsp; </span><span class="scriptor-textRun scriptor-inline">Accessible&nbsp; &gt;&nbsp; </span>Decision</div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="___77lcry0 f10pi13n"> <div class="___1hewfwb f10pi13n f7oukh6 f5p0z4x"> <div class="fui-FluentProvider codeBlock-5518fui-FluentProviderr6ek ___1jk74h0 fzk5nv6 f6n0el9 f7x6x6c f1a9mlr7 flj889f f13g0yyb ffzn0d2"> <div class="scriptor-component-code-block NhtKn7PZLzk24rduw4FJVQ== scriptor-codeblock-virtualized"> <div class="UkrLoQNicnNa5hsNIz3QLw== SpjJXGAclwYtfY+SokpSTg== ZF-Q2MvOY8aWSpGWW7iKRQ== anUhzybDvd7+8CBdKK7ukg=="> <div class="AHKpBuU8t+rAbDNImLlOHQ== lHY5JJVFnU8S-jx-OGwJkg== IUtI8YkF5Dl2LTlcjMDTwg=="> <div class="___149cboo fssjx5q f11d9hfk fj2zk3l fmyxm6j f1ldmben f1rkeeuc"> <div class="___svqwvq0 fssjx5q f11d9hfk fj2zk3l f1ldmben fzdgvog f19k5jia fzv833z f1r8x5cv f1687457 fe71wc6 f1wco4xj f103jgab f12fk6ok f4j985t fv86erk f1b4dd42 f1qwtq3x f13gvrpj f132if0v f1vblqk2 fkxsc7s f18j3zqo f1386a7m f1w3nze9 f14pe09c f4skf1h f1lq0dgc f1jgwha3 fbf5vau fc8703c"> <div class="___ysqij10 fonrc96 f1d3un5n fdk4ulh f1cijgmw fzb3wgo fssjx5q f11d9hfk fee5icb fr1uqzy"> <div class="___sv9ola0 fj2zk3l f1f4vkoj scriptor-instance-694"> <div class="scriptor-canvas scriptor-styled-scrollbar focus-container"> <div class="scriptor-pageContainer"> <div class="scriptor-pageFrame scriptor-firstPage scriptor-webView scriptor-content-visibility-auto"> <div class="scriptor-code-editor scriptor-code-wrap-on scriptor-pageBody scriptor-webViewPage"> <div class="scriptor-paragraph"><span class="scriptor-textRun scriptor-inline">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Decision&nbsp; &gt;&nbsp; YES&nbsp; &gt;&nbsp; </span><span class="scriptor-textRun scriptor-inline">Continue</span></div> <div class="scriptor-paragraph"><span class="scriptor-textRun scriptor-inline">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Decision&nbsp; &gt;&nbsp; NO&nbsp; &gt;&nbsp; </span><span class="scriptor-textRun scriptor-inline">Potential Cleanup Candidate</span></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <p>The objective is not necessarily to delete the asset immediately. Instead, the objective is to determine whether the asset still falls within the intended synchronization scope. If visibility has changed, additional evaluation may be required.</p> <hr /> <h3><strong>Gate 2: Environment Validation</strong></h3> <p>The second validation stage could evaluate environmental ownership.</p> <p>Example workflow:</p> <div class="___77lcry0 f10pi13n"> <div class="___1hewfwb f10pi13n f7oukh6 f5p0z4x"> <div class="fui-FluentProvider codeBlock-5562fui-FluentProviderr6et ___1jk74h0 fzk5nv6 f6n0el9 f7x6x6c f1a9mlr7 flj889f f13g0yyb ffzn0d2"> <div class="scriptor-component-code-block NhtKn7PZLzk24rduw4FJVQ== scriptor-codeblock-virtualized"> <div class="UkrLoQNicnNa5hsNIz3QLw== SpjJXGAclwYtfY+SokpSTg== ZF-Q2MvOY8aWSpGWW7iKRQ== anUhzybDvd7+8CBdKK7ukg=="> <div class="AHKpBuU8t+rAbDNImLlOHQ== lHY5JJVFnU8S-jx-OGwJkg== IUtI8YkF5Dl2LTlcjMDTwg=="> <div class="___149cboo fssjx5q f11d9hfk fj2zk3l fmyxm6j f1ldmben f1rkeeuc"> <div class="___svqwvq0 fssjx5q f11d9hfk fj2zk3l f1ldmben fzdgvog f19k5jia fzv833z f1r8x5cv f1687457 fe71wc6 f1wco4xj f103jgab f12fk6ok f4j985t fv86erk f1b4dd42 f1qwtq3x f13gvrpj f132if0v f1vblqk2 fkxsc7s f18j3zqo f1386a7m f1w3nze9 f14pe09c f4skf1h f1lq0dgc f1jgwha3 fbf5vau fc8703c"> <div class="___ysqij10 fonrc96 f1d3un5n fdk4ulh f1cijgmw fzb3wgo fssjx5q f11d9hfk fee5icb fr1uqzy"> <div class="___sv9ola0 fj2zk3l f1f4vkoj scriptor-instance-695"> <div class="scriptor-canvas scriptor-styled-scrollbar focus-container"> <div class="scriptor-pageContainer"> <div class="scriptor-pageFrame scriptor-firstPage scriptor-webView scriptor-content-visibility-auto"> <div class="scriptor-code-editor scriptor-code-wrap-on scriptor-pageBody scriptor-webViewPage"> <div class="scriptor-paragraph"><span class="scriptor-textRun scriptor-inline">Asset Updated&nbsp; &gt; </span><span class="scriptor-textRun scriptor-inline">Read website-environment&nbsp; &gt;&nbsp; </span><span class="scriptor-textRun scriptor-inline">Compare Against </span><span class="scriptor-textRun scriptor-inline">Current Environment&nbsp; &gt; </span>Decision:</div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="___77lcry0 f10pi13n"> <div class="___1hewfwb f10pi13n f7oukh6 f5p0z4x"> <div class="fui-FluentProvider codeBlock-2919fui-FluentProviderr6f6 ___1jk74h0 fzk5nv6 f6n0el9 f7x6x6c f1a9mlr7 flj889f f13g0yyb ffzn0d2"> <div class="scriptor-component-code-block NhtKn7PZLzk24rduw4FJVQ== scriptor-codeblock-virtualized"> <div class="CDXiecnD7ekDByb7Z+4oEA=="> <div class="r14iuplo fui-AriaLive__assertive"> <div class="scriptor-paragraph"><span class="scriptor-textRun scriptor-inline">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Decision&nbsp; &gt;&nbsp; Match&nbsp; &gt;&nbsp; </span><span class="scriptor-textRun scriptor-inline">Continue</span></div> <div class="scriptor-paragraph"><span class="scriptor-textRun scriptor-inline">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Decision&nbsp; &gt;&nbsp; No Match&nbsp; &gt;&nbsp; </span><span class="scriptor-textRun scriptor-inline">Potential Cleanup Candidate</span></div> </div> </div> </div> </div> </div> </div> <p>This allows governance decisions to be made without requiring separate DAM repositories.</p> <p>An asset intended exclusively for Production could potentially be excluded from lower environments while remaining available in Production.</p> <hr /> <h3><strong>Gate 3: Reference Validation</strong></h3> <div class="_1l4j4na3 _667h42">Before any removal occurs, a critical question must be answered: <strong class="far4bl _1a0p899 _667h42">Is the asset still being used?</strong></div> <div class="_1l4j4na3 _667h42">Optimizely Graph does not currently expose a built-in reverse-reference lookup operator. This means there is no single, generic query to answer "which content items reference this asset?" without knowledge of the content model.</div> <div class="_1l4j4na3 _667h42">&nbsp;</div> <div class="_1l4j4na3 _667h42"><strong class="far4bl _1a0p899 _667h42">Possible implementation approaches include:</strong></div> <ol class="_667h42 _1l4j4na7"> <li class="_667h42 _1l4j4na2"> <div class="_1l4j4na3 _667h42"><strong class="far4bl _1a0p899 _667h42">Full-text search</strong>&nbsp;&mdash; Query&nbsp;<code class="_667h42 _1l4j4na5">Content</code>&nbsp;using&nbsp;<code class="_667h42 _1l4j4na5">_fulltext: { match: "asset-id" }</code>&nbsp;to search across all indexed content. Quick but imprecise &mdash; depends on how asset IDs are indexed.</div> </li> <li class="_667h42 _1l4j4na2"> <div class="_1l4j4na3 _667h42"><strong class="far4bl _1a0p899 _667h42">Schema introspection + targeted queries</strong>&nbsp;&mdash; Use GraphQL introspection to discover all content types with reference-type fields, then query each one. More thorough but requires automation to be practical.</div> </li> <li class="_667h42 _1l4j4na2"> <div class="_1l4j4na3 _667h42"><strong class="far4bl _1a0p899 _667h42">Content Management API enumeration</strong>&nbsp;&mdash; Use the CMS REST API to walk content and check references programmatically.</div> </li> </ol> <div class="_1l4j4na3 _667h42">The right approach depends on your content model complexity, performance requirements, and how frequently this validation runs.&nbsp;<strong class="far4bl _1a0p899 _667h42">This gate will likely require a custom implementation tailored to your environment.</strong></div> <div class="_1l4j4na3 _667h42">&nbsp;</div> <hr /> <h3><strong>Deleting Assets from Optimizely</strong></h3> <p>Once an asset has been evaluated, a governance process may decide that removal should occur.</p> <p>Important questions include:</p> <ul> <li>Is the asset still visible?</li> <li>Is the asset assigned to the current environment?</li> <li>Is the asset actively referenced?</li> <li>Should the asset remain synchronized?</li> </ul> <p>If all validation checks indicate removal is appropriate, a deletion request could be submitted through the Content Management API.</p> <p>An important distinction exists between: <span class="scriptor-textRun scriptor-inline">Soft Delete vs </span><span class="scriptor-textRun scriptor-inline">Hard Delete</span></p> <p>For lifecycle-management scenarios, hard deletion may be more relevant because the objective is often to reduce repository footprint rather than move content into a recycle state.</p> <div class="___77lcry0 f10pi13n"> <div class="___1hewfwb f10pi13n f7oukh6 f5p0z4x"> <div class="fui-FluentProvider codeBlock-9961fui-FluentProviderr6gs ___1jk74h0 fzk5nv6 f6n0el9 f7x6x6c f1a9mlr7 flj889f f13g0yyb ffzn0d2"> <div class="scriptor-component-code-block NhtKn7PZLzk24rduw4FJVQ== scriptor-codeblock-virtualized"> <div class="CDXiecnD7ekDByb7Z+4oEA=="> <div class="r14iuplo fui-AriaLive__assertive"> <table style="border-collapse: collapse; width: 100.013%; margin-left: 0px; border-width: 1px; border-style: solid; margin-right: auto;"> <tbody> <tr> <td style="width: 10.9517%; text-align: left; vertical-align: top; border-style: solid; border-width: 1px;"><strong>Url &amp; Headers</strong></td> <td style="width: 89.0357%; text-align: left; vertical-align: top; border-style: solid; border-width: 1px;"> <div class="_47QlA7XYWbfK2INfVvTUjg=="> <div class="iVmNpJv5Hu1Eu0ev0L3Ffg=="> <div class="KU8Z3uOm5OU11Ica53+OVA=="> <div class="fui-Overflow Ye6tJij6H1xMCTdS6F25rA== ___s5d2bt0 f3x039c facid5"> <div class="vCHKFE0-MqMN20DBXhx6Ow=="> <div class="fui-Badge r1p3wql8 _9liocQIfHYrfQrOa5IZ50A== ___engtnk0 f1soahph fyk0x7v f17ad7pc f1evqen2 f70w86f fmfhf0j f1ar0y7c f1fzzbuc f176ju0o">&nbsp;</div> </div> </div> </div> </div> </div> POST /api/content/v2/data?id=bynd HTTP/1.1<br />Host: cg.optimizely.com<br />Content-Type: application/x-ndjson<br />Authorization: Basic V25KQmNtUlpSNTFYaDJuSmE1UWV5eEkwWW...[Your_Base64_Encoded_Credentials]<br /> <div class="UkrLoQNicnNa5hsNIz3QLw== SpjJXGAclwYtfY+SokpSTg== ZF-Q2MvOY8aWSpGWW7iKRQ== anUhzybDvd7+8CBdKK7ukg=="> <div class="AHKpBuU8t+rAbDNImLlOHQ== lHY5JJVFnU8S-jx-OGwJkg== IUtI8YkF5Dl2LTlcjMDTwg=="> <div class="___149cboo fssjx5q f11d9hfk fj2zk3l fmyxm6j f1ldmben f1rkeeuc"> <div class="___svqwvq0 fssjx5q f11d9hfk fj2zk3l f1ldmben fzdgvog f19k5jia fzv833z f1r8x5cv f1687457 fe71wc6 f1wco4xj f103jgab f12fk6ok f4j985t fv86erk f1b4dd42 f1qwtq3x f13gvrpj f132if0v f1vblqk2 fkxsc7s f18j3zqo f1386a7m f1w3nze9 f14pe09c f4skf1h f1lq0dgc f1jgwha3 fbf5vau fc8703c"> <div class="___ysqij10 fonrc96 f1d3un5n fdk4ulh f1cijgmw fzb3wgo fssjx5q f11d9hfk fee5icb fr1uqzy"> <div class="___sv9ola0 fj2zk3l f1f4vkoj scriptor-instance-702"> <div class="scriptor-canvas scriptor-styled-scrollbar focus-container"> <div class="scriptor-pageContainer"> <div class="scriptor-pageFrame scriptor-firstPage scriptor-webView scriptor-content-visibility-auto"> <div class="scriptor-code-editor scriptor-code-wrap-on scriptor-pageBody scriptor-webViewPage"> <div class="scriptor-paragraph">&nbsp;</div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </td> </tr> <tr> <td style="width: 10.9517%; text-align: left; vertical-align: top; border-style: solid; border-width: 1px;"><strong>Body</strong></td> <td style="width: 89.0357%; text-align: left; vertical-align: top; border-style: solid; border-width: 1px;">{"delete":{"_id":"bynder-asset-guid-12345","language_routing":"en"}}<br />{}</td> </tr> <tr> <td style="width: 10.9517%; text-align: left; vertical-align: top; border-style: solid; border-width: 1px;"><strong>Response</strong></td> <td style="width: 89.0357%; text-align: left; vertical-align: top; border-style: solid; border-width: 1px;">{<br />&nbsp; "status": "success",<br />&nbsp; "total_records_processed": 1,<br />&nbsp; "deleted": 1,<br />&nbsp; "errors": [],<br />&nbsp; "took": 42<br />}</td> </tr> </tbody> </table> </div> </div> <div class="_47QlA7XYWbfK2INfVvTUjg=="> <div class="iVmNpJv5Hu1Eu0ev0L3Ffg==">&nbsp;</div> </div> <div class="UkrLoQNicnNa5hsNIz3QLw== SpjJXGAclwYtfY+SokpSTg== ZF-Q2MvOY8aWSpGWW7iKRQ== anUhzybDvd7+8CBdKK7ukg=="> <div class="AHKpBuU8t+rAbDNImLlOHQ== lHY5JJVFnU8S-jx-OGwJkg== IUtI8YkF5Dl2LTlcjMDTwg=="> <div class="___149cboo fssjx5q f11d9hfk fj2zk3l fmyxm6j f1ldmben f1rkeeuc"> <div class="___svqwvq0 fssjx5q f11d9hfk fj2zk3l f1ldmben fzdgvog f19k5jia fzv833z f1r8x5cv f1687457 fe71wc6 f1wco4xj f103jgab f12fk6ok f4j985t fv86erk f1b4dd42 f1qwtq3x f13gvrpj f132if0v f1vblqk2 fkxsc7s f18j3zqo f1386a7m f1w3nze9 f14pe09c f4skf1h f1lq0dgc f1jgwha3 fbf5vau fc8703c"> <div class="___ysqij10 fonrc96 f1d3un5n fdk4ulh f1cijgmw fzb3wgo fssjx5q f11d9hfk fee5icb fr1uqzy"> <div class="___sv9ola0 fj2zk3l f1f4vkoj scriptor-instance-702"> <div class="scriptor-canvas scriptor-styled-scrollbar focus-container">&nbsp;</div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <p>This would permanently remove the asset rather than transferring it into a recycle bin.</p> <hr /> <h2><strong>Monitoring and Troubleshooting</strong></h2> <p>Whenever automated deletion is introduced, observability becomes extremely important.</p> <p>Questions that operations teams will eventually ask include:</p> <div class="___77lcry0 f10pi13n"> <div class="___1hewfwb f10pi13n f7oukh6 f5p0z4x"> <div class="fui-FluentProvider codeBlock-868fui-FluentProviderr6h5 ___1jk74h0 fzk5nv6 f6n0el9 f7x6x6c f1a9mlr7 flj889f f13g0yyb ffzn0d2"> <div class="scriptor-component-code-block NhtKn7PZLzk24rduw4FJVQ== scriptor-codeblock-virtualized"> <div class="UkrLoQNicnNa5hsNIz3QLw== SpjJXGAclwYtfY+SokpSTg== ZF-Q2MvOY8aWSpGWW7iKRQ== anUhzybDvd7+8CBdKK7ukg=="> <div class="AHKpBuU8t+rAbDNImLlOHQ== lHY5JJVFnU8S-jx-OGwJkg== IUtI8YkF5Dl2LTlcjMDTwg=="> <div class="___149cboo fssjx5q f11d9hfk fj2zk3l fmyxm6j f1ldmben f1rkeeuc"> <div class="___svqwvq0 fssjx5q f11d9hfk fj2zk3l f1ldmben fzdgvog f19k5jia fzv833z f1r8x5cv f1687457 fe71wc6 f1wco4xj f103jgab f12fk6ok f4j985t fv86erk f1b4dd42 f1qwtq3x f13gvrpj f132if0v f1vblqk2 fkxsc7s f18j3zqo f1386a7m f1w3nze9 f14pe09c f4skf1h f1lq0dgc f1jgwha3 fbf5vau fc8703c"> <div class="___ysqij10 fonrc96 f1d3un5n fdk4ulh f1cijgmw fzb3wgo fssjx5q f11d9hfk fee5icb fr1uqzy"> <div class="___sv9ola0 fj2zk3l f1f4vkoj scriptor-instance-703"> <div class="scriptor-canvas scriptor-styled-scrollbar focus-container"> <div class="scriptor-pageContainer"> <div class="scriptor-pageFrame scriptor-firstPage scriptor-webView scriptor-content-visibility-auto"> <div class="scriptor-code-editor scriptor-code-wrap-on scriptor-pageBody scriptor-webViewPage"> <ol> <li class="scriptor-paragraph"><span class="scriptor-textRun scriptor-inline">Was a delete triggered?</span></li> <li class="scriptor-paragraph"><span class="scriptor-textRun scriptor-inline">Which rule triggered it?</span></li> <li class="scriptor-paragraph"><span class="scriptor-textRun scriptor-inline">Which asset was deleted?</span></li> <li class="scriptor-paragraph"><span class="scriptor-textRun scriptor-inline">When did it occur?</span></li> <li class="scriptor-paragraph"><span class="scriptor-textRun scriptor-inline">What response was returned?</span></li> </ol> <div class="scriptor-paragraph">&nbsp;</div> <div class="scriptor-paragraph">A potential audit trail might capture:</div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <ul> <li>Asset identifier</li> <li>Event timestamp</li> <li>Validation results</li> <li>Environment</li> <li>API response</li> <li>Deletion outcome</li> </ul> <h3><strong>Monitoring Deletion Activity</strong></h3> <p>One area that would require validation during implementation is how deletion activity can be monitored within the platform.</p> <p>A potential starting point would be reviewing:</p> <ul> <li>Search &amp; Navigation portal logs</li> <li>Graph activity logs</li> <li>API diagnostics</li> <li>Application telemetry</li> <li>Hosting platform logs</li> </ul> <p>This would help determine whether delete operations are executing successfully and provide additional visibility during troubleshooting.</p> <hr /> <h2><strong>Extending the Existing Integration vs Building a Custom Connector</strong></h2> <p>A natural question that often emerges is:</p> <ul> <li>If lifecycle governance is required, should we simply build a custom connector?</li> </ul> <p>The answer depends on organizational priorities.</p> <table style="border-collapse: collapse; width: 79.5271%; border-width: 1px; height: 368.425px; border-spacing: 5px; border-style: solid;"> <tbody> <tr style="height: 57.625px;"> <td style="text-align: left; vertical-align: top; border-width: 1px; width: 50.4919%; padding: 1px; border-style: solid; height: 57.625px;"> <h4><strong>Option 1: Extend the Existing Integration</strong></h4> </td> <td style="text-align: left; vertical-align: top; border-width: 1px; width: 49.4881%; padding: 1px; border-style: solid; height: 57.625px;"> <h4><strong>Option 2: Build a Fully Custom Connector</strong></h4> </td> </tr> <tr style="height: 310.8px;"> <td style="text-align: left; vertical-align: top; border-width: 1px; width: 50.4919%; padding: 1px; border-style: solid; height: 310.8px;"> <p><span class="scriptor-textRun scriptor-inline">Bynder&nbsp; &gt;&nbsp; </span><span class="scriptor-textRun scriptor-inline">OOTB Connector&nbsp; &gt;&nbsp; </span><span class="scriptor-textRun scriptor-inline">Optimizely </span><span class="scriptor-textRun scriptor-inline">+ Governance Layer</span></p> <p>Advantages:</p> <ul> <li>Faster implementation</li> <li>Lower maintenance overhead</li> <li>Vendor-supported synchronization</li> <li>Smaller operational footprint</li> </ul> <p>Potential limitations:</p> <ul> <li>Less control over synchronization internals</li> <li>Dependency on platform capabilities</li> </ul> </td> <td style="text-align: left; vertical-align: top; border-width: 1px; width: 49.4881%; padding: 1px; border-style: solid; height: 310.8px;"> <div class="___77lcry0 f10pi13n"> <div class="___1hewfwb f10pi13n f7oukh6 f5p0z4x"> <div class="fui-FluentProvider codeBlock-9357fui-FluentProviderr6hn ___1jk74h0 fzk5nv6 f6n0el9 f7x6x6c f1a9mlr7 flj889f f13g0yyb ffzn0d2"> <div class="scriptor-component-code-block NhtKn7PZLzk24rduw4FJVQ== scriptor-codeblock-virtualized"> <div class="UkrLoQNicnNa5hsNIz3QLw== SpjJXGAclwYtfY+SokpSTg== ZF-Q2MvOY8aWSpGWW7iKRQ== anUhzybDvd7+8CBdKK7ukg=="> <div class="AHKpBuU8t+rAbDNImLlOHQ== lHY5JJVFnU8S-jx-OGwJkg== IUtI8YkF5Dl2LTlcjMDTwg=="> <div class="___149cboo fssjx5q f11d9hfk fj2zk3l fmyxm6j f1ldmben f1rkeeuc"> <div class="___svqwvq0 fssjx5q f11d9hfk fj2zk3l f1ldmben fzdgvog f19k5jia fzv833z f1r8x5cv f1687457 fe71wc6 f1wco4xj f103jgab f12fk6ok f4j985t fv86erk f1b4dd42 f1qwtq3x f13gvrpj f132if0v f1vblqk2 fkxsc7s f18j3zqo f1386a7m f1w3nze9 f14pe09c f4skf1h f1lq0dgc f1jgwha3 fbf5vau fc8703c"> <div class="___ysqij10 fonrc96 f1d3un5n fdk4ulh f1cijgmw fzb3wgo fssjx5q f11d9hfk fee5icb fr1uqzy"> <div class="___sv9ola0 fj2zk3l f1f4vkoj scriptor-instance-705"> <div class="scriptor-canvas scriptor-styled-scrollbar focus-container"> <div class="scriptor-pageContainer"> <div class="scriptor-pageFrame scriptor-firstPage scriptor-webView scriptor-content-visibility-auto"> <div class="scriptor-code-editor scriptor-code-wrap-on scriptor-pageBody scriptor-webViewPage"> <div class="scriptor-paragraph"><span class="scriptor-textRun scriptor-inline">Bynder&nbsp; &gt;&nbsp; </span><span class="scriptor-textRun scriptor-inline">Custom Connector&nbsp; &gt;&nbsp; </span><span class="scriptor-textRun scriptor-inline">Optimizely</span></div> <div class="scriptor-paragraph">&nbsp;</div> <div class="scriptor-paragraph">Advantages:</div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <ul> <li>Complete control</li> <li>Custom business logic</li> <li>Full synchronization ownership</li> </ul> <p>Potential considerations:</p> <ul> <li>Authentication management</li> <li>Delta synchronization</li> <li>Retry handling</li> <li>Error recovery</li> <li>Schema evolution</li> <li>Long-term maintenance costs</li> </ul> </td> </tr> </tbody> </table> <div class="___77lcry0 f10pi13n"> <div class="___1hewfwb f10pi13n f7oukh6 f5p0z4x"> <div class="fui-FluentProvider codeBlock-3356fui-FluentProviderr6he ___1jk74h0 fzk5nv6 f6n0el9 f7x6x6c f1a9mlr7 flj889f f13g0yyb ffzn0d2"> <div class="scriptor-component-code-block NhtKn7PZLzk24rduw4FJVQ== scriptor-codeblock-virtualized"> <div class="UkrLoQNicnNa5hsNIz3QLw== SpjJXGAclwYtfY+SokpSTg== ZF-Q2MvOY8aWSpGWW7iKRQ== anUhzybDvd7+8CBdKK7ukg=="> <div class="AHKpBuU8t+rAbDNImLlOHQ== lHY5JJVFnU8S-jx-OGwJkg== IUtI8YkF5Dl2LTlcjMDTwg=="> <div class="___149cboo fssjx5q f11d9hfk fj2zk3l fmyxm6j f1ldmben f1rkeeuc"> <div class="___svqwvq0 fssjx5q f11d9hfk fj2zk3l f1ldmben fzdgvog f19k5jia fzv833z f1r8x5cv f1687457 fe71wc6 f1wco4xj f103jgab f12fk6ok f4j985t fv86erk f1b4dd42 f1qwtq3x f13gvrpj f132if0v f1vblqk2 fkxsc7s f18j3zqo f1386a7m f1w3nze9 f14pe09c f4skf1h f1lq0dgc f1jgwha3 fbf5vau fc8703c"> <div class="___ysqij10 fonrc96 f1d3un5n fdk4ulh f1cijgmw fzb3wgo fssjx5q f11d9hfk fee5icb fr1uqzy"> <div class="___sv9ola0 fj2zk3l f1f4vkoj scriptor-instance-704"> <div class="scriptor-canvas scriptor-styled-scrollbar focus-container"> <div class="scriptor-pageContainer"> <div class="scriptor-pageFrame scriptor-firstPage scriptor-webView scriptor-content-visibility-auto"> <div class="scriptor-code-editor scriptor-code-wrap-on scriptor-pageBody scriptor-webViewPage">&nbsp;</div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <p>For many organizations, extending an existing integration with additional governance capabilities may represent a more balanced approach than replacing the synchronization engine altogether.</p> <hr /> <h2><strong>Assumptions and Validation Status</strong></h2> <p>The approaches discussed throughout this article are based on architectural evaluation and platform capability analysis rather than a fully validated production implementation.</p> <p>At the time of writing, the proposed event-driven webhook model remains an architectural concept that appears technically achievable based on the currently available capabilities of:</p> <ul> <li>Bynder webhooks</li> <li>Bynder permanent tokens</li> <li>Optimizely Content Management /Graph APIs</li> <li>Optimizely Graph reference lookups</li> <li>Standard event-driven integration patterns</li> </ul> <p>However, several areas would benefit from additional validation before adoption within a production environment:</p> <ul> <li>Large-scale webhook processing behavior</li> <li>API rate limiting and throttling characteristics</li> <li>Long-running operational reliability</li> <li>Deletion timing and synchronization race conditions</li> <li>Monitoring and alerting strategies</li> <li>Reconciliation requirements for lost events</li> <li>Long-term maintenance implications</li> </ul> <p>As with any architectural pattern, organizations should conduct their own validation, performance testing, and operational reviews before implementing the approach within production workloads.</p> <div><hr /> <h2><strong>Conclusion</strong></h2> <p>Asset synchronization is only one stage in the lifecycle of an enterprise DAM integration.</p> <p>As asset repositories grow, organizations may also need to consider how visibility changes, environment allocation, content relationships, and cleanup processes should be handled over time.</p> <p>The approaches discussed in this article should be viewed as architectural considerations rather than implementation recommendations. While the proposed event-driven governance model appears technically feasible based on the capabilities provided by Bynder, Optimizely SaaS CMS, and Optimizely Graph, additional validation and testing would be required before considering it for production adoption.</p> <p>Ultimately, long-term success is unlikely to depend solely on controlling what enters the system. It may also require thoughtful approaches to governing assets throughout their lifecycle&mdash;from synchronization and distribution through validation, retention, and eventual removal.</p> <hr /> <h4 class="_1l4j4na1 _1qskm0h c8urk _1a0p899 _5hqrjx _667h42">📚 Bynder + Optimizely SaaS CMS Integration Series</h4> <div class="_1l4j4na3 _667h42"><em class="far4bl _667h42">This article is the final installment of a 3-part comprehensive architecture guide:</em></div> <ul class="_667h42 _1l4j4na6"> <li class="_667h42 _1l4j4na2"><strong class="far4bl _1a0p899 _667h42">✅ Part 1:&nbsp;<a class="_667h42 _1l4j4nac _1c9dtv3 _1by2b93 _1140xq1 _667h42" href="/link/4f215cd334254dfcbc121d5f4e20edd6.aspx">Implementing the Connector &mdash; Lessons Learned</a></strong><br /><em class="far4bl _667h42">What metadata syncs, how URLs behave, and how to query/render assets in a Next.js frontend.<br /><br /></em></li> <li class="_667h42 _1l4j4na2"><strong class="far4bl _1a0p899 _667h42">✅ Part 2:&nbsp;<a class="_667h42 _1l4j4nac _1c9dtv3 _1by2b93 _1140xq1 _667h42" href="/link/30275ac47c4843148eeda8b7d6ed282a.aspx">Planning &amp; Filtering &mdash; Avoiding Asset Sprawl and Unnecessary Sync</a></strong><br /><em class="far4bl _667h42">How we achieved metadata-based sync filtering with zero custom code.<br /><br /></em></li> <li class="_667h42 _1l4j4na2"><strong class="far4bl _1a0p899 _667h42">👉 Part 3: Exploring Asset Lifecycle Management &amp; Three-Gate Governance</strong>&nbsp;<em class="far4bl _667h42">(You are here)</em><br /><em class="far4bl _667h42">A webhook-driven, three-gate model to handle asset updates, environments, and usage verification.</em></li> </ul> </div>2026-07-05T07:44:36.0000000ZBlog post Planning Your Bynder DAM and Optimizely SaaS CMS Integration the Right Way: Avoiding Asset Sprawl and Unnecessary Synchronization<p class="MsoNormal"><span class="far4bl _667h42">Note: This is Part 2 of our Bynder integration series. If you missed the Part 1, check out "<a href="/link/4f215cd334254dfcbc121d5f4e20edd6.aspx">Implementing the Bynder DAM Connector with Optimizely SaaS CMS: Lessons Learned</a>".</span></p> <p class="MsoNormal">In my previous article, I explored how the Bynder DAM Connector integrates with Optimizely SaaS CMS and how synchronized assets become available through Optimizely Graph and the CMS authoring experience.</p> <p class="MsoNormal">This article focuses specifically on the Out-of-the-Box (OOTB) Bynder Connector available through Optimizely Connect Platform (OCP). The goal is to understand how much control can be achieved using standard Optimizely and Bynder capabilities before introducing custom integrations, middleware, or synchronization processes.</p> <p class="MsoNormal">While the technical setup of the OOTB connector is relatively straightforward, I discovered that the most important decisions actually happen&nbsp;<em>before</em> the first synchronization is ever executed.</p> <p class="MsoNormal">Many implementation teams focus on establishing the connection between Bynder and Optimizely. However, a more important architectural question is:</p> <p class="MsoNormal"><strong>What assets should Optimizely be allowed to see in the first place?</strong></p> <p class="MsoNormal">For organizations that use Bynder as a centralized Digital Asset Management platform, the answer has significant implications for governance, editor experience, operational overhead, and long-term scalability.</p> <p class="MsoNormal">This article focuses on the planning and governance considerations that should be addressed before enabling the Bynder connector.</p> <div class="MsoNormal" style="text-align: center;" align="center"><hr /></div> <h3 class="MsoNormal"><strong>Understanding the Default Connector Behavior</strong></h3> <p class="MsoNormal">The Out-of-the-Box (OOTB) Bynder connector synchronizes assets that are visible to the authenticated Bynder account.</p> <p class="MsoNormal">In simple terms, the connector does not determine which assets should be synchronized. Bynder determines that by evaluating the permissions of the account used during the authorization process.</p> <p class="MsoNormal">As a result, the overall scope of synchronization is directly influenced by:</p> <ul style="margin-top: 0cm;"> <li class="MsoNormal" style="mso-list: l10 level1 lfo1; tab-stops: list 36.0pt;">The permission profile assigned to the integration account</li> <li class="MsoNormal" style="mso-list: l10 level1 lfo1; tab-stops: list 36.0pt;">Asset visibility settings within Bynder</li> <li class="MsoNormal" style="mso-list: l10 level1 lfo1; tab-stops: list 36.0pt;">Metadata visibility rules</li> <li class="MsoNormal" style="mso-list: l10 level1 lfo1; tab-stops: list 36.0pt;">The account used during connector authorization</li> </ul> <p class="MsoNormal">The connector can only synchronize assets that the authenticated account can access.</p> <p class="MsoNormal">This seemingly simple behavior becomes extremely important when working with large DAM implementations.</p> <div class="MsoNormal" style="text-align: center;" align="center"><hr /></div> <h3 class="MsoNormal"><strong>Why Asset Scope Matters</strong></h3> <p class="MsoNormal">In many organizations, Bynder contains assets for multiple business functions and audiences.</p> <p class="MsoNormal">Examples include:</p> <ul style="margin-top: 0cm;"> <li class="MsoNormal" style="mso-list: l3 level1 lfo2; tab-stops: list 36.0pt;">Website assets</li> <li class="MsoNormal" style="mso-list: l3 level1 lfo2; tab-stops: list 36.0pt;">Campaign assets</li> <li class="MsoNormal" style="mso-list: l3 level1 lfo2; tab-stops: list 36.0pt;">Product photography</li> <li class="MsoNormal" style="mso-list: l3 level1 lfo2; tab-stops: list 36.0pt;">Internal communications</li> <li class="MsoNormal" style="mso-list: l3 level1 lfo2; tab-stops: list 36.0pt;">Regional marketing materials</li> <li class="MsoNormal" style="mso-list: l3 level1 lfo2; tab-stops: list 36.0pt;">Archived content</li> <li class="MsoNormal" style="mso-list: l3 level1 lfo2; tab-stops: list 36.0pt;">Partner-specific assets</li> <li class="MsoNormal" style="mso-list: l3 level1 lfo2; tab-stops: list 36.0pt;">Brand assets</li> </ul> <p class="MsoNormal">Not all of these assets are intended for websites powered by Optimizely.</p> <p class="MsoNormal">Without careful planning, the connector can synchronize substantially more assets than editors actually need.</p> <p class="MsoNormal">At first glance this may not appear to be a major concern. However, every synchronized asset becomes another content item managed by the Optimizely ecosystem.</p> <p class="MsoNormal">As synchronization volume grows:</p> <ul style="margin-top: 0cm;"> <li class="MsoNormal" style="mso-list: l12 level1 lfo3; tab-stops: list 36.0pt;">More items are stored in Optimizely Graph</li> <li class="MsoNormal" style="mso-list: l12 level1 lfo3; tab-stops: list 36.0pt;">More content records are created</li> <li class="MsoNormal" style="mso-list: l12 level1 lfo3; tab-stops: list 36.0pt;">More synchronization events are processed</li> <li class="MsoNormal" style="mso-list: l12 level1 lfo3; tab-stops: list 36.0pt;">Asset selection becomes harder for editors</li> <li class="MsoNormal" style="mso-list: l12 level1 lfo3; tab-stops: list 36.0pt;">Governance becomes increasingly complex</li> </ul> <p class="MsoNormal">Most importantly, organizations should understand how content volume contributes to overall platform usage and operational overhead.</p> <p class="MsoNormal">For this reason, a successful DAM strategy is not about synchronizing everything that exists inside Bynder.</p> <p class="MsoNormal">It is about synchronizing only what is required.</p> <div class="MsoNormal" style="text-align: center;" align="center"><hr /></div> <h3 class="MsoNormal"><strong>Start With Governance, Not Technology</strong></h3> <p class="MsoNormal">One of the biggest lessons learned during implementation was that DAM integrations are primarily a governance challenge rather than a technical challenge.</p> <p class="MsoNormal">The connector itself can be configured very quickly.</p> <p class="MsoNormal">Determining which assets should be synchronized requires considerably more thought.</p> <p class="MsoNormal">Before connecting Bynder to Optimizely, I recommend answering questions such as:</p> <ul style="margin-top: 0cm;"> <li class="MsoNormal" style="mso-list: l14 level1 lfo4; tab-stops: list 36.0pt;">Which assets are intended for public websites?</li> <li class="MsoNormal" style="mso-list: l14 level1 lfo4; tab-stops: list 36.0pt;">Which business teams own those assets?</li> <li class="MsoNormal" style="mso-list: l14 level1 lfo4; tab-stops: list 36.0pt;">Which environments require those assets?</li> <li class="MsoNormal" style="mso-list: l14 level1 lfo4; tab-stops: list 36.0pt;">Who approves synchronization scope changes?</li> <li class="MsoNormal" style="mso-list: l14 level1 lfo4; tab-stops: list 36.0pt;">How will future asset growth be managed?</li> </ul> <p class="MsoNormal">Answering these questions early can prevent a significant amount of cleanup work later.</p> <div class="MsoNormal" style="text-align: center;" align="center"><hr /></div> <h3 class="MsoNormal"><strong>The Common Mistake: Connecting With an Administrator Account</strong></h3> <p class="MsoNormal">The easiest way to enable the connector is often to authenticate using an administrator account.</p> <p class="MsoNormal">The workflow usually looks something like this:</p> <ol style="margin-top: 0cm;"> <li class="MsoNormal" style="mso-list: l4 level1 lfo5; tab-stops: list 36.0pt;">Open the Bynder connector.</li> <li class="MsoNormal" style="mso-list: l4 level1 lfo5; tab-stops: list 36.0pt;">Click Connect.</li> <li class="MsoNormal" style="mso-list: l4 level1 lfo5; tab-stops: list 36.0pt;">Log in using administrative credentials.</li> <li class="MsoNormal" style="mso-list: l4 level1 lfo5; tab-stops: list 36.0pt;">Approve access.</li> <li class="MsoNormal" style="mso-list: l4 level1 lfo5; tab-stops: list 36.0pt;">Start synchronizing.</li> </ol> <p class="MsoNormal">The problem is that administrator accounts often see virtually everything.</p> <p class="MsoNormal">That means the connector can potentially see:</p> <ul style="margin-top: 0cm;"> <li class="MsoNormal" style="mso-list: l8 level1 lfo6; tab-stops: list 36.0pt;">Website assets</li> <li class="MsoNormal" style="mso-list: l8 level1 lfo6; tab-stops: list 36.0pt;">Internal assets</li> <li class="MsoNormal" style="mso-list: l8 level1 lfo6; tab-stops: list 36.0pt;">Historical assets</li> <li class="MsoNormal" style="mso-list: l8 level1 lfo6; tab-stops: list 36.0pt;">Regional assets</li> <li class="MsoNormal" style="mso-list: l8 level1 lfo6; tab-stops: list 36.0pt;">Unused assets</li> <li class="MsoNormal" style="mso-list: l8 level1 lfo6; tab-stops: list 36.0pt;">Archived assets</li> </ul> <p class="MsoNormal">In other words, the connector effectively inherits access to the entire DAM repository.</p> <p class="MsoNormal">This removes any meaningful synchronization boundaries.</p> <div class="MsoNormal" style="text-align: center;" align="center"><hr /></div> <h3 class="MsoNormal"><strong>Why Creating a New User Is Not Enough</strong></h3> <p class="MsoNormal">A common assumption is:</p> <p class="MsoNormal">"I'll simply create a new user for Optimizely and restrict its permissions."</p> <p class="MsoNormal">Unfortunately, this is where many implementations run into trouble.</p> <p class="MsoNormal">Bynder permissions are primarily controlled through Permission Profiles.</p> <p class="MsoNormal">The effective model looks like this:</p> <p class="MsoNormal"><strong>Permission Profile&nbsp; &rarr;&nbsp; User&nbsp; &rarr;&nbsp; Asset Visibility</strong></p> <p class="MsoNormal">This means that simply creating a new user does not automatically reduce visibility.</p> <p class="MsoNormal">If the new integration user remains associated with a highly privileged profile, that user may still inherit broad access to assets.</p> <p class="MsoNormal">In practice, creating a new user and placing it within an administrator-level permission profile often results in another highly privileged user.</p> <p class="MsoNormal">The desired filtering behavior never materializes.</p> <p class="MsoNormal">This is why a dedicated Permission Profile becomes essential.</p> <div class="MsoNormal" style="text-align: center;" align="center"><hr /></div> <h3 class="MsoNormal"><strong>The Recommended Approach</strong></h3> <p class="MsoNormal">Instead of creating a user within an existing administrative profile, create:</p> <ul style="margin-top: 0cm;"> <li class="MsoNormal" style="mso-list: l1 level1 lfo7; tab-stops: list 36.0pt;">A dedicated synchronization user</li> <li class="MsoNormal" style="mso-list: l1 level1 lfo7; tab-stops: list 36.0pt;">A dedicated synchronization permission profile</li> <li class="MsoNormal" style="mso-list: l1 level1 lfo7; tab-stops: list 36.0pt;">Dedicated metadata visibility rules</li> </ul> <p class="MsoNormal">Together, these become the foundation of your synchronization strategy.</p> <p class="MsoNormal">The goal is to create an account that acts as a read-only integration consumer and nothing more.</p> <div class="MsoNormal" style="text-align: center;" align="center"><hr /></div> <h4><strong>1. Creating a Dedicated Synchronization Profile</strong></h4> <p class="MsoNormal">The dedicated synchronization profile should be configured with only the permissions required for integration purposes.</p> <p class="MsoNormal">Recommended permissions include:</p> <p class="MsoNormal"><strong>Asset Bank</strong></p> <ul style="margin-top: 0cm;"> <li class="MsoNormal" style="mso-list: l15 level1 lfo8; tab-stops: list 36.0pt;">View assets</li> <li class="MsoNormal" style="mso-list: l15 level1 lfo8; tab-stops: list 36.0pt;">Search assets</li> <li class="MsoNormal" style="mso-list: l15 level1 lfo8; tab-stops: list 36.0pt;">View asset details</li> <li class="MsoNormal" style="mso-list: l15 level1 lfo8; tab-stops: list 36.0pt;">View metaproperties</li> </ul> <p class="MsoNormal"><strong>General / Integration</strong></p> <ul style="margin-top: 0cm;"> <li class="MsoNormal" style="mso-list: l2 level1 lfo9; tab-stops: list 36.0pt;">API Access</li> <li class="MsoNormal" style="mso-list: l2 level1 lfo9; tab-stops: list 36.0pt;">Manage Webhooks</li> </ul> <p class="MsoNormal">Permissions that generally do not need to be enabled include:</p> <ul style="margin-top: 0cm;"> <li class="MsoNormal" style="mso-list: l7 level1 lfo10; tab-stops: list 36.0pt;">Upload assets</li> <li class="MsoNormal" style="mso-list: l7 level1 lfo10; tab-stops: list 36.0pt;">Edit assets</li> <li class="MsoNormal" style="mso-list: l7 level1 lfo10; tab-stops: list 36.0pt;">Delete assets</li> <li class="MsoNormal" style="mso-list: l7 level1 lfo10; tab-stops: list 36.0pt;">Manage taxonomy</li> <li class="MsoNormal" style="mso-list: l7 level1 lfo10; tab-stops: list 36.0pt;">Administrative functions</li> </ul> <div class="MsoNormal" style="text-align: center;" align="center"><hr /></div> <div> <h4><strong>2. Create a Dedicated Synchronization Account</strong></h4> <p>Once the synchronization profile has been configured, create a dedicated service account and assign it exclusively to that profile.</p> <p>This account will be used during the Bynder authorization process and will ultimately determine which assets the Optimizely connector can access.</p> <p>Avoid assigning the account to an existing administrative profile or a profile used by content creators. The goal is to create a narrowly scoped integration account whose sole responsibility is synchronizing approved assets into Optimizely.</p> <p>By separating the integration account from day-to-day user accounts, you gain:</p> <ul> <li>Predictable synchronization behavior</li> <li>Easier troubleshooting</li> <li>Clear ownership of integration permissions</li> <li>Reduced risk of unintentionally exposing additional assets to Optimizely</li> </ul> <div class="MsoNormal" style="text-align: center;" align="center"><hr /></div> </div> <h4 class="MsoNormal"><strong>3. Using Metadata as a Synchronization Boundary</strong></h4> <p class="MsoNormal">Many teams think about metadata exclusively in terms of search and categorization.</p> <p class="MsoNormal">During this implementation, I found it equally useful to think of metadata as a governance mechanism.</p> <p class="MsoNormal">Metadata can help answer questions such as:</p> <ul style="margin-top: 0cm;"> <li class="MsoNormal" style="mso-list: l13 level1 lfo11; tab-stops: list 36.0pt;">Should this asset be visible to websites?</li> <li class="MsoNormal" style="mso-list: l13 level1 lfo11; tab-stops: list 36.0pt;">Which business unit owns this asset?</li> <li class="MsoNormal" style="mso-list: l13 level1 lfo11; tab-stops: list 36.0pt;">Which region can use this asset?</li> <li class="MsoNormal" style="mso-list: l13 level1 lfo11; tab-stops: list 36.0pt;">Which environments should receive this asset?</li> </ul> <p class="MsoNormal">By implementing metadata-driven visibility, organizations can define synchronization boundaries before assets enter Optimizely.</p> <p class="MsoNormal">This keeps governance as close as possible to the source system.</p> <div class="MsoNormal" style="text-align: center;" align="center"><hr /></div> <h4 class="MsoNormal"><strong>4. Configuring Metadata Visibility</strong></h4> <p class="MsoNormal">One effective approach is to use a <strong>required metadata property</strong> that identifies whether an asset is intended for website consumption.</p> <p class="MsoNormal">For example: <strong>VisibleTo</strong><br /><br /><img style="border-width: 1px; border-style: solid;" src="/link/9b93cf8ded06433fb473d4ee88ef7f0d.aspx?1783186950489" width="447" height="174" /></p> <p class="MsoNormal">To configure this:</p> <ol style="margin-top: 0cm;"> <li class="MsoNormal" style="mso-list: l17 level1 lfo12; tab-stops: list 36.0pt;">Navigate to <strong>Settings&nbsp; &rarr;&nbsp; Taxonomy&nbsp; &rarr;&nbsp; Metaproperties Management</strong></li> <li class="MsoNormal" style="mso-list: l17 level1 lfo12; tab-stops: list 36.0pt;">Select the metadata property</li> <li class="MsoNormal" style="mso-list: l17 level1 lfo12; tab-stops: list 36.0pt;">Open the <strong>Visibility</strong> configuration</li> <li class="MsoNormal" style="mso-list: l17 level1 lfo12; tab-stops: list 36.0pt;">Select the synchronization profile</li> <li class="MsoNormal" style="mso-list: l17 level1 lfo12; tab-stops: list 36.0pt;">Grant/deny visibility only to approved metadata values.</li> </ol> <p><img style="border-width: 1px; border-style: solid;" src="/link/f4763bfeca7d40b780f19110f800e0c8.aspx?1783187024542" width="564" height="330" /></p> <p class="MsoNormal">When configured correctly, the synchronization account becomes effectively blind to assets outside the approved scope.</p> <div class="MsoNormal" style="text-align: center;" align="center"><hr /></div> <h4 class="MsoNormal"><strong>5. Validate Before Connecting</strong></h4> <p class="MsoNormal">One of the most valuable steps in the entire process happens before Optimizely is connected.</p> <p class="MsoNormal">After creating the synchronization account and permission profile:</p> <ol style="margin-top: 0cm;"> <li class="MsoNormal" style="mso-list: l11 level1 lfo13; tab-stops: list 36.0pt;">Open an Incognito or InPrivate browser session.</li> <li class="MsoNormal" style="mso-list: l11 level1 lfo13; tab-stops: list 36.0pt;">Login using the synchronization account.</li> <li class="MsoNormal" style="mso-list: l11 level1 lfo13; tab-stops: list 36.0pt;">Search for assets.</li> <li class="MsoNormal" style="mso-list: l11 level1 lfo13; tab-stops: list 36.0pt;">Browse collections.</li> <li class="MsoNormal" style="mso-list: l11 level1 lfo13; tab-stops: list 36.0pt;">Verify metadata visibility.</li> <li class="MsoNormal" style="mso-list: l11 level1 lfo13; tab-stops: list 36.0pt;">Validate that only the intended assets are available.</li> </ol> <p class="MsoNormal">Ask yourself:</p> <p class="MsoNormal">If I connect Optimizely using this account right now, am I comfortable synchronizing every asset visible on this screen?</p> <p class="MsoNormal">If the answer is no, continue refining the profile before proceeding.</p> <p class="MsoNormal">This simple validation step can save considerable troubleshooting effort later.</p> <div class="MsoNormal" style="text-align: center;" align="center"><hr /></div> <h3 class="MsoNormal"><strong>The Authorization Flow Trap</strong></h3> <p class="MsoNormal">Another lesson learned during implementation is that the authorization process deserves more attention than most teams initially give it.</p> <p class="MsoNormal">The connector authorization flow uses the account that participates in the OAuth approval process.</p> <p class="MsoNormal">If an existing browser session already contains administrative Bynder credentials, those credentials may inadvertently be used during authorization.</p> <p class="MsoNormal">To avoid this:</p> <ol style="margin-top: 0cm;"> <li class="MsoNormal" style="mso-list: l6 level1 lfo14; tab-stops: list 36.0pt;">Open a fresh InPrivate or Incognito browser window.</li> <li class="MsoNormal" style="mso-list: l6 level1 lfo14; tab-stops: list 36.0pt;">Login to Optimizely SaaS CMS.</li> <li class="MsoNormal" style="mso-list: l6 level1 lfo14; tab-stops: list 36.0pt;">Start the Bynder App installation and connection process.</li> <li class="MsoNormal" style="font-weight: bold;"><strong>Most Important:</strong> <ol style="margin-top: 0cm;"> <li class="MsoNormal" style="mso-list: l6 level1 lfo14; tab-stops: list 36.0pt;">Installation process must open the Bynder login page.</li> <li class="MsoNormal" style="mso-list: l6 level1 lfo14; tab-stops: list 36.0pt;">Login using the dedicated synchronization account.</li> </ol> </li> <li class="MsoNormal" style="mso-list: l6 level1 lfo14; tab-stops: list 36.0pt;">Complete the authorization flow.</li> </ol> <p class="MsoNormal">Using a clean browser session helps ensure the connector is authorized with the intended account rather than accidentally inheriting access from an existing administrative session.</p> <div class="MsoNormal" style="text-align: center;" align="center"><hr /></div> <h4 class="MsoNormal"><strong>Understanding the Synchronization Flow</strong></h4> <p class="MsoNormal"><strong>Scenario A : Asset is visible to the synchronization account</strong></p> <ul style="margin-top: 0cm;"> <li class="MsoNormal" style="mso-list: l0 level1 lfo15; tab-stops: list 36.0pt;">Asset uploaded/updated into Bynder.</li> <li class="MsoNormal" style="mso-list: l0 level1 lfo15; tab-stops: list 36.0pt;">Bynder triggers the OCP connector webhook.</li> <li class="MsoNormal" style="mso-list: l0 level1 lfo15; tab-stops: list 36.0pt;">Bynder receives a request from the connector.</li> <li class="MsoNormal" style="mso-list: l0 level1 lfo15; tab-stops: list 36.0pt;">The synchronization account is authorized to view the asset.</li> <li class="MsoNormal" style="mso-list: l0 level1 lfo15; tab-stops: list 36.0pt;">Bynder returns the asset payload.</li> <li class="MsoNormal" style="mso-list: l0 level1 lfo15; tab-stops: list 36.0pt;">OCP processes the response.</li> <li class="MsoNormal" style="mso-list: l0 level1 lfo15; tab-stops: list 36.0pt;">The asset is synchronized into Optimizely Graph.</li> <li class="MsoNormal" style="mso-list: l0 level1 lfo15; tab-stops: list 36.0pt;">The asset may become available within CMS depending on configuration.</li> </ul> <p class="MsoNormal"><img style="border-width: 1px; border-style: solid;" src="/link/a927f1a971c74079be8d3e97e45419be.aspx?1783187744711" width="582" height="391" /></p> <div class="MsoNormal" style="text-align: center;" align="center"><hr /></div> <p class="MsoNormal"><strong>Scenario B : Asset is not visible to the synchronization account</strong></p> <ul style="margin-top: 0cm;"> <li>Asset uploaded/updated into Bynder.</li> <li class="MsoNormal" style="mso-list: l0 level1 lfo15; tab-stops: list 36.0pt;">Bynder triggers the OCP connector webhook.</li> <li class="MsoNormal" style="mso-list: l0 level1 lfo15; tab-stops: list 36.0pt;">Bynder receives a request from the connector.</li> <li class="MsoNormal" style="mso-list: l9 level1 lfo16; tab-stops: list 36.0pt;">Bynder evaluates permissions.</li> <li class="MsoNormal" style="mso-list: l9 level1 lfo16; tab-stops: list 36.0pt;">Access is denied because the synchronization account cannot see the asset.</li> <li class="MsoNormal" style="mso-list: l9 level1 lfo16; tab-stops: list 36.0pt;">No asset payload is returned.</li> <li class="MsoNormal" style="mso-list: l9 level1 lfo16; tab-stops: list 36.0pt;">OCP connector skips synchronization.</li> </ul> <p class="MsoNormal">This means filtering occurs naturally through the permission model rather than through custom synchronization logic.</p> <p class="MsoNormal"><img style="border-width: 1px; border-style: solid;" src="/link/cae36a1cec544c05918e7bcee09a60d8.aspx?1783187879183" width="447" height="428" /></p> <div class="MsoNormal" style="text-align: center;" align="center"><hr /></div> <h3 class="MsoNormal"><strong>Key Lessons Learned</strong></h3> <p class="MsoNormal">One of the biggest realizations are that successful DAM integrations are defined long before the first asset is synchronized.</p> <p class="MsoNormal">A few recommendations I would strongly encourage:</p> <ul style="margin-top: 0cm;"> <li class="MsoNormal" style="mso-list: l5 level1 lfo18; tab-stops: list 36.0pt;">Define synchronization boundaries before configuring the connector.</li> <li class="MsoNormal" style="mso-list: l5 level1 lfo18; tab-stops: list 36.0pt;">Create a dedicated integration profile instead of reusing administrative profiles.</li> <li class="MsoNormal" style="mso-list: l5 level1 lfo18; tab-stops: list 36.0pt;">Use metadata strategically rather than treating it purely as a categorization tool.</li> <li class="MsoNormal" style="mso-list: l5 level1 lfo18; tab-stops: list 36.0pt;">Validate permissions using a private browser session before connecting Optimizely.</li> <li class="MsoNormal" style="mso-list: l5 level1 lfo18; tab-stops: list 36.0pt;">Think carefully about which assets truly belong inside the website ecosystem.</li> <li class="MsoNormal" style="mso-list: l5 level1 lfo18; tab-stops: list 36.0pt;">Start with a smaller, controlled asset scope and expand incrementally if needed.</li> </ul> <p class="MsoNormal">Most importantly:</p> <p class="MsoNormal"><strong>Just because an asset exists in Bynder does not mean it needs to exist in Optimizely.</strong></p> <div class="MsoNormal" style="text-align: center;" align="center"><hr /></div> <h3 class="MsoNormal"><strong>Conclusion</strong></h3> <p class="MsoNormal">The Bynder connector makes it very easy to bring DAM assets into Optimizely SaaS CMS.</p> <p class="MsoNormal">However, the long-term success of the integration depends less on connector configuration and more on governance decisions made beforehand.</p> <p class="MsoNormal">By investing time in permission profiles, metadata design, synchronization boundaries, and dedicated integration accounts, organizations can significantly reduce operational overhead and create a much cleaner experience for both editors and developers.</p> <div>In my next article, I'll take a deeper look at what happens after synchronization is established. We'll explore how asset visibility changes can create orphan records, how synchronization behavior is impacted when assets move in and out of scope, and the operational challenges that emerge in multi-environment implementations. I'll also discuss environment-specific asset governance considerations, common pitfalls organizations encounter as their DAM footprint grows, and architectural approaches for keeping Optimizely environments clean, scalable, and maintainable over time.<br /><br /></div> <div> <div class="MsoNormal" style="text-align: center;" align="center"><hr /></div> </div> <div> <h4 class="_1l4j4na1 _1qskm0h c8urk _1a0p899 _5hqrjx _667h42">📚 Bynder + Optimizely SaaS CMS Integration Series</h4> <div class="_1l4j4na3 _667h42"><em class="far4bl _667h42">This article is the second installment of a 3-part comprehensive architecture guide:</em></div> <ul class="_667h42 _1l4j4na6"> <li class="_667h42 _1l4j4na2"><strong class="far4bl _1a0p899 _667h42">✅ Part 1:&nbsp;<a class="_667h42 _1l4j4nac _1c9dtv3 _1by2b93 _1140xq1 _667h42" href="/link/4f215cd334254dfcbc121d5f4e20edd6.aspx">Implementing the Connector &mdash; Lessons Learned</a></strong><br /><em class="far4bl _667h42">What metadata syncs, how URLs behave, and how to query/render assets in a Next.js frontend.<br /><br /></em></li> <li class="_667h42 _1l4j4na2"><strong class="far4bl _1a0p899 _667h42">👉 Part 2: Planning &amp; Filtering &mdash; Avoiding Asset Sprawl and Unnecessary Sync</strong>&nbsp;<em class="far4bl _667h42">(You are here)</em><br /><em class="far4bl _667h42">How we achieved metadata-based sync filtering with zero custom code.<br /><br /></em></li> <li class="_667h42 _1l4j4na2"><strong class="far4bl _1a0p899 _667h42">⏭️ Part 3:&nbsp;<a class="_667h42 _1l4j4nac _1c9dtv3 _1by2b93 _1140xq1 _667h42" href="/link/650c1d72d9a84c28b2355e8942fc7cda.aspx">Exploring Asset Lifecycle Management &amp; Three-Gate Governance</a></strong><br /><em class="far4bl _667h42">Explore a webhook-driven, three-gate model to handle asset updates, environments, and usage verification.</em></li> </ul> </div>2026-07-04T18:28:12.0000000ZBlog post Implementing the Bynder DAM Connector with Optimizely SaaS CMS: Lessons Learned<p class="MsoNormal"><em>What I learned while integrating Bynder DAM with Optimizely SaaS CMS, exploring Optimizely Graph, and building a headless frontend experience.</em></p> <div class="MsoNormal" style="text-align: left;" align="center"><hr /> <h2 class="MsoNormal"><strong>Introduction</strong></h2> <p class="MsoNormal">While working on an Optimizely SaaS CMS implementation, I spent considerable time understanding how the Bynder DAM connector works, what data gets synchronized, how assets appear in Optimizely Graph, and how frontend applications should consume those assets.</p> <p class="MsoNormal">Although both Optimizely and Bynder provide documentation, I found very little content that shows the complete end-to-end picture:</p> <ul style="margin-top: 0cm;"> <li class="MsoNormal" style="mso-list: l0 level1 lfo1; tab-stops: list 36.0pt;">What metadata gets synchronized?</li> <li class="MsoNormal" style="mso-list: l0 level1 lfo1; tab-stops: list 36.0pt;">How do assets appear in Optimizely CMS?</li> <li class="MsoNormal" style="mso-list: l0 level1 lfo1; tab-stops: list 36.0pt;">What does the data look like in Optimizely Graph?</li> <li class="MsoNormal" style="mso-list: l0 level1 lfo1; tab-stops: list 36.0pt;">How do developers render images, videos, and documents?</li> <li class="MsoNormal" style="mso-list: l0 level1 lfo1; tab-stops: list 36.0pt;">How do public and private assets behave?</li> <li class="MsoNormal" style="mso-list: l0 level1 lfo1; tab-stops: list 36.0pt;">What are the limitations of the connector?</li> </ul> <p><span style="font-size: 12.0pt; line-height: 115%; font-family: 'Aptos',sans-serif; mso-ascii-theme-font: minor-latin; mso-fareast-font-family: Aptos; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin; mso-bidi-font-family: 'Times New Roman'; mso-bidi-theme-font: minor-bidi; mso-ansi-language: EN-IN; mso-fareast-language: EN-US; mso-bidi-language: AR-SA;">This article summarizes my findings and lessons learned from exploring the integration.</span></p> <div class="MsoNormal" style="text-align: center;" align="center"><hr /></div> <h3 class="MsoNormal"><strong>What is Optimizely SaaS CMS?</strong></h3> <p class="MsoNormal">Optimizely SaaS CMS is a cloud-native content management platform that enables organizations to create and manage content experiences across websites, mobile applications, portals, and other digital channels.</p> <p class="MsoNormal">Key capabilities include:</p> <ul style="margin-top: 0cm;"> <li class="MsoNormal" style="mso-list: l1 level1 lfo1; tab-stops: list 36.0pt;">Content modeling</li> <li class="MsoNormal" style="mso-list: l1 level1 lfo1; tab-stops: list 36.0pt;">Headless content delivery</li> <li class="MsoNormal" style="mso-list: l1 level1 lfo1; tab-stops: list 36.0pt;">Visual editing</li> <li class="MsoNormal" style="mso-list: l1 level1 lfo1; tab-stops: list 36.0pt;">Multi-site architecture</li> <li class="MsoNormal" style="mso-list: l1 level1 lfo1; tab-stops: list 36.0pt;">Optimizely Graph integration</li> <li class="MsoNormal" style="mso-list: l1 level1 lfo1; tab-stops: list 36.0pt;">API-first content management</li> </ul> <p class="MsoNormal">Unlike traditional CMS platforms, content in Optimizely SaaS is managed through content types and delivered through APIs and Optimizely Graph.</p> <div class="MsoNormal" style="text-align: center;" align="center"><hr /></div> <h3 class="MsoNormal"><strong>What is Bynder?</strong></h3> <p class="MsoNormal">Bynder is an enterprise Digital Asset Management (DAM) platform.</p> <p class="MsoNormal">Organizations typically use Bynder to manage:</p> <ul style="margin-top: 0cm;"> <li class="MsoNormal" style="mso-list: l0 level1 lfo2; tab-stops: list 36.0pt;">Images</li> <li class="MsoNormal" style="mso-list: l0 level1 lfo2; tab-stops: list 36.0pt;">Videos</li> <li class="MsoNormal" style="mso-list: l0 level1 lfo2; tab-stops: list 36.0pt;">Brand assets</li> <li class="MsoNormal" style="mso-list: l0 level1 lfo2; tab-stops: list 36.0pt;">Product photography</li> <li class="MsoNormal" style="mso-list: l0 level1 lfo2; tab-stops: list 36.0pt;">Brochures and documents</li> <li class="MsoNormal" style="mso-list: l0 level1 lfo2; tab-stops: list 36.0pt;">Marketing collateral</li> <li class="MsoNormal" style="mso-list: l0 level1 lfo2; tab-stops: list 36.0pt;">Digital media libraries</li> </ul> <p class="MsoNormal">Bynder often serves as the single source of truth for digital assets while Optimizely serves as the source of truth for content.</p> <div class="MsoNormal" style="text-align: center;" align="center"><hr /></div> <h3><strong>Why Do We Need a Connector?</strong></h3> <p class="MsoNormal">Without a connector, editorial teams typically follow this process:</p> <p class="MsoNormal">Bynder DAM <span style="font-family: Wingdings; mso-ascii-font-family: Aptos; mso-ascii-theme-font: minor-latin; mso-hansi-font-family: Aptos; mso-hansi-theme-font: minor-latin; mso-char-type: symbol; mso-symbol-font-family: Wingdings;"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings;">&agrave;</span></span> Download Asset <span style="font-family: Wingdings; mso-ascii-font-family: Aptos; mso-ascii-theme-font: minor-latin; mso-hansi-font-family: Aptos; mso-hansi-theme-font: minor-latin; mso-char-type: symbol; mso-symbol-font-family: Wingdings;"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings;">&agrave;</span></span> Upload Asset to CMS <span style="font-family: Wingdings; mso-ascii-font-family: Aptos; mso-ascii-theme-font: minor-latin; mso-hansi-font-family: Aptos; mso-hansi-theme-font: minor-latin; mso-char-type: symbol; mso-symbol-font-family: Wingdings;"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings;">&agrave;</span></span> Use Asset on Website<br />OR<br />Bynder DAM <span style="font-family: Wingdings; mso-ascii-font-family: Aptos; mso-ascii-theme-font: minor-latin; mso-hansi-font-family: Aptos; mso-hansi-theme-font: minor-latin; mso-char-type: symbol; mso-symbol-font-family: Wingdings;"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings;">&agrave;</span></span> Copy Asset URL <span style="font-family: Wingdings; mso-ascii-font-family: Aptos; mso-ascii-theme-font: minor-latin; mso-hansi-font-family: Aptos; mso-hansi-theme-font: minor-latin; mso-char-type: symbol; mso-symbol-font-family: Wingdings;"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings;">&agrave;</span></span> Paste Asset URL to CMS <span style="font-family: Wingdings; mso-ascii-font-family: Aptos; mso-ascii-theme-font: minor-latin; mso-hansi-font-family: Aptos; mso-hansi-theme-font: minor-latin; mso-char-type: symbol; mso-symbol-font-family: Wingdings;"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings;">&agrave;</span></span> Use Asset on Website</p> <p class="MsoNormal">This creates multiple problems:</p> <ul style="margin-top: 0cm;"> <li class="MsoNormal" style="mso-list: l0 level1 lfo1; tab-stops: list 36.0pt;">Duplicate storage</li> <li class="MsoNormal" style="mso-list: l0 level1 lfo1; tab-stops: list 36.0pt;">Asset versioning issues</li> <li class="MsoNormal" style="mso-list: l0 level1 lfo1; tab-stops: list 36.0pt;">Governance challenges</li> <li class="MsoNormal" style="mso-list: l0 level1 lfo1; tab-stops: list 36.0pt;">Increased maintenance effort</li> <li class="MsoNormal" style="mso-list: l0 level1 lfo1; tab-stops: list 36.0pt;">Multiple sources of truth</li> </ul> <p class="MsoNormal">The Bynder Connector changes the process significantly:</p> <p class="MsoNormal">Bynder DAM <span style="font-family: Wingdings; mso-ascii-font-family: Aptos; mso-ascii-theme-font: minor-latin; mso-hansi-font-family: Aptos; mso-hansi-theme-font: minor-latin; mso-char-type: symbol; mso-symbol-font-family: Wingdings;"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings;">&agrave;</span></span> DAM Connector <span style="font-family: Wingdings; mso-ascii-font-family: Aptos; mso-ascii-theme-font: minor-latin; mso-hansi-font-family: Aptos; mso-hansi-theme-font: minor-latin; mso-char-type: symbol; mso-symbol-font-family: Wingdings;"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings;">&agrave;</span></span> Optimizely Graph &amp; CMS <span style="font-family: Wingdings; mso-ascii-font-family: Aptos; mso-ascii-theme-font: minor-latin; mso-hansi-font-family: Aptos; mso-hansi-theme-font: minor-latin; mso-char-type: symbol; mso-symbol-font-family: Wingdings;"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings;">&agrave;</span></span> Frontend Application</p> <p class="MsoNormal">Benefits include:</p> <ul style="margin-top: 0cm;"> <li class="MsoNormal" style="mso-list: l1 level1 lfo2; tab-stops: list 36.0pt;">Single source of truth</li> <li class="MsoNormal" style="mso-list: l1 level1 lfo2; tab-stops: list 36.0pt;">No duplicate assets</li> <li class="MsoNormal" style="mso-list: l1 level1 lfo2; tab-stops: list 36.0pt;">Improved governance</li> <li class="MsoNormal" style="mso-list: l1 level1 lfo2; tab-stops: list 36.0pt;">Centralized asset management</li> <li class="MsoNormal" style="mso-list: l1 level1 lfo2; tab-stops: list 36.0pt;">Better scalability</li> </ul> <p class="MsoNormal">Editors never need to download and re-upload assets.</p> <p class="MsoNormal">Instead, references to Bynder assets become available directly within Optimizely CMS.</p> <div class="MsoNormal" style="text-align: center;" align="center"><hr /> <h2 class="MsoNormal" style="text-align: left;"><strong>Understanding the Bynder Asset Model</strong></h2> <p class="MsoNormal" style="text-align: left;">One of the first things I wanted to understand was what data becomes available. <span style="font-size: 12.0pt; line-height: 115%; font-family: 'Aptos',sans-serif; mso-ascii-theme-font: minor-latin; mso-fareast-font-family: Aptos; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin; mso-bidi-font-family: 'Times New Roman'; mso-bidi-theme-font: minor-bidi; mso-ansi-language: EN-IN; mso-fareast-language: EN-US; mso-bidi-language: AR-SA;">A Bynder asset can be thought of as a combination of following:</span></p> <ul class="article-editor-bullet-list"> <li class="article-editor-list-item"> <p class="article-editor-paragraph" style="text-align: left;"><strong>Bynder Managed Fields - </strong>Maintained automatically by Bynder. These fields describe the physical asset itself.</p> </li> <li class="article-editor-list-item" style="text-align: left;"> <p class="article-editor-paragraph"><strong>User Managed Fields - </strong>These fields are managed by DAM users and are often used for: Search, Categorization, Filtering, Metadata enrichment.</p> </li> <li class="article-editor-list-item" style="text-align: left;"> <p class="article-editor-paragraph"><strong>User Managed Flags: </strong>These fields can influence asset behavior. These become particularly important when assets are exposed to public-facing websites.</p> </li> <li class="article-editor-list-item" style="text-align: left;"> <p class="article-editor-paragraph"><strong>URLs:</strong> Assets URLs based on asset object and various configurations and enabled features in Bynder.</p> </li> </ul> <p class="MsoNormal" style="text-align: left;"><span style="font-size: 12.0pt; line-height: 115%; font-family: 'Aptos',sans-serif; mso-ascii-theme-font: minor-latin; mso-fareast-font-family: Aptos; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin; mso-bidi-font-family: 'Times New Roman'; mso-bidi-theme-font: minor-bidi; mso-ansi-language: EN-IN; mso-fareast-language: EN-US; mso-bidi-language: AR-SA;"><br /><img src="/link/717b08ca5a0f40aaa9d6924e17798cc1.aspx" /><br /></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><hr /></div> <h3 class="MsoNormal" style="text-align: left;"><strong>Understanding the Available Asset URLs</strong></h3> <p class="MsoNormal" style="text-align: left;">One of the most useful discoveries was understanding which URLs are available for different asset types.&nbsp;Not every asset type exposes the same URLs.</p> <div class="MsoNormal" style="text-align: center;" align="center"><hr /></div> <h4 class="MsoNormal" style="text-align: left;"><strong>Image Assets - </strong>Image assets typically provide:</h4> <table class="MsoTableGrid" style="border-collapse: collapse; margin-left: 0px; margin-right: auto; width: 79.5455%; height: 233px; border-image: initial; border: medium none currentcolor;"> <tbody> <tr style="height: 40.7625px;"> <td style="width: 33.7357%; border: 1pt solid windowtext; padding: 0cm 5.4pt; text-align: left; line-height: 1; height: 40.7625px; vertical-align: top;"> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;"><strong>Original URL</strong></p> </td> <td style="width: 32.4977%; border-width: 1pt 1pt 1pt medium; border-style: solid solid solid none; border-color: windowtext windowtext windowtext currentcolor; border-image: initial; padding: 0cm 5.4pt; text-align: left; line-height: 1; height: 40.7625px; vertical-align: top;"> <p class="MsoNormal" style="margin-bottom: 0cm; line-height: normal;"><strong>Thumbnail URL</strong></p> </td> <td style="width: 33.5809%; border-width: 1pt 1pt 1pt medium; border-style: solid solid solid none; border-color: windowtext windowtext windowtext currentcolor; border-image: initial; padding: 0cm 5.4pt; text-align: left; line-height: 1; height: 40.7625px; vertical-align: top;"> <p class="MsoNormal" style="margin-bottom: 0cm; line-height: normal;"><strong>Transform Base URL</strong></p> </td> </tr> <tr style="height: 65.2px;"> <td style="width: 33.7357%; border-width: medium 1pt 1pt; border-style: none solid solid; border-color: currentcolor windowtext windowtext; border-image: initial; padding: 0cm 5.4pt; text-align: left; line-height: 1; height: 65.2px; vertical-align: top;"> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">Represents the original uploaded file.</p> </td> <td style="width: 32.4977%; border-width: medium 1pt 1pt medium; border-style: none solid solid none; border-color: currentcolor windowtext windowtext currentcolor; padding: 0cm 5.4pt; text-align: left; line-height: 1; height: 65.2px; vertical-align: top;"> <p class="MsoNormal" style="margin-bottom: 0cm; line-height: normal;">Represents a smaller version of the image.</p> </td> <td style="width: 33.5809%; border-width: medium 1pt 1pt medium; border-style: none solid solid none; border-color: currentcolor windowtext windowtext currentcolor; padding: 0cm 5.4pt; text-align: left; line-height: 1; height: 65.2px; vertical-align: top;"> <p class="MsoNormal" style="margin-bottom: 0cm; line-height: normal;">Instead of generating multiple physical image versions, Bynder allows images to be transformed dynamically.</p> </td> </tr> <tr style="height: 135.262px;"> <td style="width: 33.7357%; border-width: medium 1pt 1pt; border-style: none solid solid; border-color: currentcolor windowtext windowtext; border-image: initial; padding: 0cm 5.4pt; text-align: left; line-height: 1; height: 135.262px; vertical-align: top;"> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">Use cases:</p> <p class="MsoNormal" style="margin-bottom: 0cm; line-height: normal;">High-resolution download, <br />Print-quality rendering, <br />Internal consumption</p> </td> <td style="width: 32.4977%; border-width: medium 1pt 1pt medium; border-style: none solid solid none; border-color: currentcolor windowtext windowtext currentcolor; padding: 0cm 5.4pt; text-align: left; line-height: 1; height: 135.262px; vertical-align: top;"> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">Use cases:</p> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">Asset pickers, <br />Search results, <br />Content listings, <br />Media libraries</p> </td> <td style="width: 33.5809%; border-width: medium 1pt 1pt medium; border-style: none solid solid none; border-color: currentcolor windowtext windowtext currentcolor; padding: 0cm 5.4pt; text-align: left; line-height: 1; height: 135.262px; vertical-align: top;"> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">Use cases:</p> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">Hero banners, <br />Product images, <br />Responsive image delivery, <br />Mobile optimization, <br />Social sharing images</p> </td> </tr> </tbody> </table> <p class="MsoNormal" style="text-align: left;">&nbsp;Transform Base URL helps improve:</p> <ul> <li style="text-align: left;">Performance</li> <li style="text-align: left;">Page speed</li> <li style="text-align: left;">Bandwidth consumption</li> </ul> <div class="MsoNormal" style="text-align: center;" align="center"><hr /></div> <h4 class="MsoNormal" style="text-align: left;"><strong>Video Assets - </strong>Video assets typically provide:</h4> <table class="MsoTableGrid" style="width: 948px; border-collapse: collapse; border-image: initial; height: 188px; border: medium none currentcolor;"> <tbody> <tr style="mso-yfti-irow: 0; mso-yfti-firstrow: yes;"> <td style="width: 301.017px; border: 1pt solid windowtext; padding: 0cm 5.4pt; text-align: left; vertical-align: top;"> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;"><strong>Original URL</strong></p> </td> <td style="width: 300.742px; border-width: 1pt 1pt 1pt medium; border-style: solid solid solid none; border-color: windowtext windowtext windowtext currentcolor; border-image: initial; padding: 0cm 5.4pt; text-align: left; vertical-align: top;"> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;"><strong>Thumbnail URL</strong></p> </td> <td style="width: 299.905px; border-width: 1pt 1pt 1pt medium; border-style: solid solid solid none; border-color: windowtext windowtext windowtext currentcolor; border-image: initial; padding: 0cm 5.4pt; text-align: left; vertical-align: top;"> <p class="MsoNormal" style="margin-bottom: 0cm; line-height: normal;"><strong>Video Preview URL</strong></p> </td> </tr> <tr style="mso-yfti-irow: 1;"> <td style="width: 301.017px; border-width: medium 1pt 1pt; border-style: none solid solid; border-color: currentcolor windowtext windowtext; border-image: initial; padding: 0cm 5.4pt; text-align: left; vertical-align: top;"> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">The complete video asset</p> </td> <td style="width: 300.742px; border-width: medium 1pt 1pt medium; border-style: none solid solid none; border-color: currentcolor windowtext windowtext currentcolor; padding: 0cm 5.4pt; text-align: left; vertical-align: top;"> <p class="MsoNormal" style="margin-bottom: 0cm; line-height: normal;">Poster image for the video.</p> </td> <td style="width: 299.905px; border-width: medium 1pt 1pt medium; border-style: none solid solid none; border-color: currentcolor windowtext windowtext currentcolor; padding: 0cm 5.4pt; text-align: left; vertical-align: top;"> <p class="MsoNormal" style="margin-bottom: 0cm; line-height: normal;">Optimized preview version.</p> </td> </tr> <tr style="mso-yfti-irow: 2; mso-yfti-lastrow: yes;"> <td style="width: 301.017px; border-width: medium 1pt 1pt; border-style: none solid solid; border-color: currentcolor windowtext windowtext; border-image: initial; padding: 0cm 5.4pt; text-align: left; vertical-align: top;"> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">Use cases:</p> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">Full playback,<br />Downloads,<br />Media processing</p> </td> <td style="width: 300.742px; border-width: medium 1pt 1pt medium; border-style: none solid solid none; border-color: currentcolor windowtext windowtext currentcolor; padding: 0cm 5.4pt; text-align: left; vertical-align: top;"> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">Use cases:</p> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">Video cards,<br />Search results,<br />Carousel view</p> </td> <td style="width: 299.905px; border-width: medium 1pt 1pt medium; border-style: none solid solid none; border-color: currentcolor windowtext windowtext currentcolor; padding: 0cm 5.4pt; text-align: left; vertical-align: top;"> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">Use cases:</p> <p class="MsoNormal" style="margin-bottom: 0cm; line-height: normal;">Video galleries,<br />Content previews,<br />Editorial review</p> </td> </tr> </tbody> </table> <div class="MsoNormal" style="text-align: center;" align="center"><hr /></div> <h4 class="MsoNormal" style="text-align: left;"><strong>Document Assets - </strong>Document assets typically provide:</h4> <table class="MsoTableGrid" style="width: 584px; border-collapse: collapse; border-image: initial; height: 177px; border: medium none currentcolor;"> <tbody> <tr style="mso-yfti-irow: 0; mso-yfti-firstrow: yes;"> <td style="width: 276.225px; border: 1pt solid windowtext; padding: 0cm 5.4pt; text-align: left; vertical-align: top;"> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;"><strong>Original URL</strong></p> </td> <td style="width: 276.238px; border-width: 1pt 1pt 1pt medium; border-style: solid solid solid none; border-color: windowtext windowtext windowtext currentcolor; border-image: initial; padding: 0cm 5.4pt; text-align: left; vertical-align: top;"> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;"><strong>Thumbnail URL</strong></p> </td> </tr> <tr style="mso-yfti-irow: 1; mso-yfti-lastrow: yes;"> <td style="width: 276.225px; border-width: medium 1pt 1pt; border-style: none solid solid; border-color: currentcolor windowtext windowtext; border-image: initial; padding: 0cm 5.4pt; text-align: left; vertical-align: top;"> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">Used for:</p> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">Document downloads,<br />Direct viewing,<br />PDF rendering</p> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">&nbsp;</p> </td> <td style="width: 276.238px; border-width: medium 1pt 1pt medium; border-style: none solid solid none; border-color: currentcolor windowtext windowtext currentcolor; padding: 0cm 5.4pt; text-align: left; vertical-align: top;"> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">Used for:</p> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">Document previews,<br />Search results,<br />Asset browsers</p> </td> </tr> </tbody> </table> <div class="MsoNormal" style="text-align: center;" align="center"><hr /></div> <h2 class="MsoNormal" style="text-align: left;"><strong>Setting Up the Connector</strong></h2> <p class="MsoNormal" style="text-align: left;">Connector setup is relatively straightforward. Follow the documentation here:<br /><a href="https://support.optimizely.com/hc/en-us/articles/37465644973069-Configure-the-Bynder-app">https://support.optimizely.com/hc/en-us/articles/37465644973069-Configure-the-Bynder-app</a></p> <p class="MsoNormal" style="text-align: left;">Typical configuration requires:</p> <ol> <li style="text-align: left;"><!-- [if !supportLists]-->Bynder Admin Access</li> <li style="text-align: left;"><!--[endif]-->Webhook permissions on your Bynder user profile to authorize this integration.<br /><span style="mso-no-proof: yes;"><img src="/link/9c05c0fedea141afa9dab9a3c5c06c34.aspx" width="333" height="338" border="0" /><br /><br /></span></li> <li style="text-align: left;"><span style="mso-no-proof: yes;"><span style="text-indent: -18pt;">Bynder OAuth App, Client ID, Client Secret</span></span></li> <li style="text-align: left;"><span style="text-indent: -18pt;">OCP (Connect Platform) access in Optimizely SaaS instance.</span></li> </ol> <p class="MsoNormal" style="text-align: left;">Note that:<br />a) Setup separate sync for:</p> <p class="MsoListParagraphCxSpFirst" style="margin-left: 54pt; text-indent: -18pt; text-align: left;"><!-- [if !supportLists]--><span style="mso-bidi-font-family: Aptos; mso-bidi-theme-font: minor-latin;"><span style="mso-list: Ignore;">1.<span style="font: 7.0pt 'Times New Roman';">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span></span><!--[endif]-->Each Bynder object i.e. image, document, video.</p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 54pt; text-indent: -18pt; text-align: left;"><!-- [if !supportLists]--><span style="mso-bidi-font-family: Aptos; mso-bidi-theme-font: minor-latin;"><span style="mso-list: Ignore;">2.<span style="font: 7.0pt 'Times New Roman';">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span></span><!--[endif]-->Each Optimizely environment i.e. Dev, Stage, Prod (test1, test2, Production)</p> <p class="MsoListParagraphCxSpLast" style="margin-left: 54pt; text-indent: -18pt; text-align: left;"><!-- [if !supportLists]--><span style="mso-bidi-font-family: Aptos; mso-bidi-theme-font: minor-latin;"><span style="mso-list: Ignore;">3.<span style="font: 7.0pt 'Times New Roman';">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span></span><!--[endif]-->Each Language (if applicable) otherwise use Neutral language<br /><br /></p> <p class="MsoNormal" style="text-align: left;">b) <span style="mso-spacerun: yes;">&nbsp;</span>In the Destination create separate ContentType for each object i.e. Image <span style="font-family: Wingdings; mso-ascii-font-family: Aptos; mso-ascii-theme-font: minor-latin; mso-hansi-font-family: Aptos; mso-hansi-theme-font: minor-latin; mso-char-type: symbol; mso-symbol-font-family: Wingdings;"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings;">&agrave;</span></span> BynderImage, Document <span style="font-family: Wingdings; mso-ascii-font-family: Aptos; mso-ascii-theme-font: minor-latin; mso-hansi-font-family: Aptos; mso-hansi-theme-font: minor-latin; mso-char-type: symbol; mso-symbol-font-family: Wingdings;"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings;">&agrave;</span></span> BynderDocument, Video <span style="font-family: Wingdings; mso-ascii-font-family: Aptos; mso-ascii-theme-font: minor-latin; mso-hansi-font-family: Aptos; mso-hansi-theme-font: minor-latin; mso-char-type: symbol; mso-symbol-font-family: Wingdings;"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings;">&agrave;</span></span> BynderVideo<br /><span style="mso-no-proof: yes;"><!-- [if gte vml 1]><v:shape id="Picture_x0020_1" o:spid="_x0000_i1027" type="#_x0000_t75" style='width:141.6pt;height:142.8pt; visibility:visible;mso-wrap-style:square'> <v:imagedata src="file:///C:/Users/VBanka/AppData/Local/Temp/msohtmlclip1/01/clip_image003.png" o:title=""/> </v:shape><![endif]--><!-- [if !vml]--><img src="/link/f5f31192a9884124b0db9dd9fd09fd70.aspx" width="240" height="241" border="0" /><br /><br /><!--[endif]--></span></p> <p class="MsoNormal" style="text-align: left;">c) Ensure selection of &ldquo;Make available as CMS Content&rdquo; checkbox.<br /><span style="mso-no-proof: yes;"><!-- [if gte vml 1]><v:shape id="Picture_x0020_18" o:spid="_x0000_i1026" type="#_x0000_t75" style='width:277.8pt;height:293.4pt; visibility:visible;mso-wrap-style:square'> <v:imagedata src="file:///C:/Users/VBanka/AppData/Local/Temp/msohtmlclip1/01/clip_image005.png" o:title=""/> </v:shape><![endif]--><!-- [if !vml]--><img src="/link/282149262aa94df1b3376c4a82e1ac77.aspx" width="370" height="391" border="0" /><br /><br /><!--[endif]--></span></p> <p class="MsoNormal" style="text-align: left;">Once configured successfully:</p> <p class="MsoNormal" style="text-align: left;">Bynder Assets <span style="font-family: Wingdings; mso-ascii-font-family: Aptos; mso-ascii-theme-font: minor-latin; mso-hansi-font-family: Aptos; mso-hansi-theme-font: minor-latin; mso-char-type: symbol; mso-symbol-font-family: Wingdings;"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings;">&agrave;</span></span> DAM Connector <span style="font-family: Wingdings; mso-ascii-font-family: Aptos; mso-ascii-theme-font: minor-latin; mso-hansi-font-family: Aptos; mso-hansi-theme-font: minor-latin; mso-char-type: symbol; mso-symbol-font-family: Wingdings;"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings;">&agrave;</span></span> Optimizely Graph + CMS Content Type</p> <p class="MsoNormal" style="text-align: left;">Assets become available inside Optimizely Graph and CMS both without custom code.</p> <div class="MsoNormal" style="text-align: left;" align="center"><hr /></div> <h2 class="MsoNormal" style="text-align: left;"><strong>Content Manager Experience</strong></h2> <p class="MsoNormal" style="text-align: left;">From an editorial perspective, this is where things become interesting.</p> <p class="MsoNormal" style="text-align: left;">After configuration, editors can browse DAM assets directly inside CMS.</p> <p class="MsoNormal" style="text-align: left;">The Content Manager navigation typically exposes a dedicated content provider area.</p> <p class="MsoNormal" style="text-align: left;"><span style="mso-no-proof: yes;"><!-- [if gte vml 1]><v:shapetype id="_x0000_t75" coordsize="21600,21600" o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe" filled="f" stroked="f"> <v:stroke joinstyle="miter"/> <v:formulas> <v:f eqn="if lineDrawn pixelLineWidth 0"/> <v:f eqn="sum @0 1 0"/> <v:f eqn="sum 0 0 @1"/> <v:f eqn="prod @2 1 2"/> <v:f eqn="prod @3 21600 pixelWidth"/> <v:f eqn="prod @3 21600 pixelHeight"/> <v:f eqn="sum @0 0 1"/> <v:f eqn="prod @6 1 2"/> <v:f eqn="prod @7 21600 pixelWidth"/> <v:f eqn="sum @8 21600 0"/> <v:f eqn="prod @7 21600 pixelHeight"/> <v:f eqn="sum @10 21600 0"/> </v:formulas> <v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"/> <o:lock v:ext="edit" aspectratio="t"/> </v:shapetype><v:shape id="Picture_x0020_20" o:spid="_x0000_i1052" type="#_x0000_t75" style='width:451.2pt;height:151.8pt;visibility:visible;mso-wrap-style:square' o:bordertopcolor="yellow pure" o:borderleftcolor="yellow pure" o:borderbottomcolor="yellow pure" o:borderrightcolor="yellow pure"> <v:imagedata src="file:///C:/Users/VBanka/AppData/Local/Temp/msohtmlclip1/01/clip_image001.png" o:title=""/> <w:bordertop type="single" width="6"/> <w:borderleft type="single" width="6"/> <w:borderbottom type="single" width="6"/> <w:borderright type="single" width="6"/> </v:shape><![endif]--><!-- [if !vml]--><img src="/link/470118ee057e4cdcb0fbfd2a052e02bb.aspx" width="603" height="204" /><!--[endif]--></span></p> <p class="MsoNormal" style="text-align: left;"><span style="mso-no-proof: yes;"><!-- [if gte vml 1]><v:shape id="Picture_x0020_1" o:spid="_x0000_i1051" type="#_x0000_t75" style='width:451.2pt; height:169.8pt;visibility:visible;mso-wrap-style:square' o:bordertopcolor="yellow pure" o:borderleftcolor="yellow pure" o:borderbottomcolor="yellow pure" o:borderrightcolor="yellow pure"> <v:imagedata src="file:///C:/Users/VBanka/AppData/Local/Temp/msohtmlclip1/01/clip_image003.png" o:title=""/> <w:bordertop type="single" width="6"/> <w:borderleft type="single" width="6"/> <w:borderbottom type="single" width="6"/> <w:borderright type="single" width="6"/> </v:shape><![endif]--><!-- [if !vml]--><img src="/link/aaa2751bab514ace865a38bbd7c8ab7d.aspx" width="603" height="228" /><!--[endif]--></span></p> <p class="MsoNormal" style="text-align: left;">At this point, editors do not need to leave CMS to discover assets stored in Bynder.</p> <p class="MsoNormal" style="text-align: left;">They can:&nbsp;Search, Browse, Filter, Reference assets&nbsp;directly from the content authoring experience.</p> <div class="MsoNormal" style="text-align: left;" align="center"><hr /></div> <h2 class="MsoNormal" style="text-align: left;"><strong>How Assets Appear in Optimizely Graph</strong></h2> <p class="MsoNormal" style="text-align: left;">Once synchronized, DAM assets become queryable through Graph.</p> <p class="MsoNormal" style="text-align: left;">A simplified query may look like (the exact query will depend on your field mappings)<br style="mso-special-character: line-break;" /><!-- [if !supportLineBreakNewLine]--><br style="mso-special-character: line-break;" /><!--[endif]--></p> <table class="MsoTableGrid" style="border-collapse: collapse; margin-left: 0px; margin-right: auto; border-image: initial; height: 362px; width: 73.2839%; border: medium none currentcolor;"> <tbody> <tr style="mso-yfti-irow: 0; mso-yfti-firstrow: yes;"> <td style="width: 0%; border: 1pt solid windowtext; padding: 0cm 5.4pt; text-align: left; vertical-align: top;"> <p class="MsoNormal" style="margin-bottom: 0cm; line-height: normal;"><strong>Image</strong></p> </td> <td style="width: 0%; border-width: 1pt 1pt 1pt medium; border-style: solid solid solid none; border-color: windowtext windowtext windowtext currentcolor; border-image: initial; padding: 0cm 5.4pt; text-align: left; vertical-align: top;"> <p class="MsoNormal" style="margin-bottom: 0cm; line-height: normal;"><strong>Video</strong></p> </td> <td style="width: 0%; border-width: 1pt 1pt 1pt medium; border-style: solid solid solid none; border-color: windowtext windowtext windowtext currentcolor; border-image: initial; padding: 0cm 5.4pt; text-align: left; vertical-align: top;"> <p class="MsoNormal" style="margin-bottom: 0cm; line-height: normal;"><strong>Document</strong></p> </td> </tr> <tr style="mso-yfti-irow: 1; mso-yfti-lastrow: yes;"> <td style="width: 0%; border-width: medium 1pt 1pt; border-style: none solid solid; border-color: currentcolor windowtext windowtext; border-image: initial; padding: 0cm 5.4pt; text-align: left; vertical-align: top;"> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">query {</p> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">&nbsp; BynderImage {</p> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">&nbsp;&nbsp;&nbsp; items {</p> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; id</p> <p class="MsoNormal" style="margin-bottom: 0cm; line-height: normal;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; name</p> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; originalUrl</p> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; thumbnailUrl</p> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; transformBaseUrl</p> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">&nbsp;&nbsp;&nbsp; }</p> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">&nbsp; }</p> <p class="MsoNormal" style="margin-bottom: 0cm; line-height: normal;">}</p> </td> <td style="width: 0%; border-width: medium 1pt 1pt medium; border-style: none solid solid none; border-color: currentcolor windowtext windowtext currentcolor; padding: 0cm 5.4pt; text-align: left; vertical-align: top;"> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">query {</p> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">&nbsp; BynderVideo {</p> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">&nbsp;&nbsp;&nbsp; items {</p> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; id</p> <p class="MsoNormal" style="margin-bottom: 0cm; line-height: normal;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; name</p> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; originalUrl</p> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; thumbnailUrl</p> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;videoPreviewURL</p> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">&nbsp;&nbsp;&nbsp; }</p> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">&nbsp; }</p> <p class="MsoNormal" style="margin-bottom: 0cm; line-height: normal;">}</p> </td> <td style="width: 0%; border-width: medium 1pt 1pt medium; border-style: none solid solid none; border-color: currentcolor windowtext windowtext currentcolor; padding: 0cm 5.4pt; text-align: left; vertical-align: top;"> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">query {</p> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">&nbsp; BynderDocument {</p> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">&nbsp;&nbsp;&nbsp; items {</p> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; id</p> <p class="MsoNormal" style="margin-bottom: 0cm; line-height: normal;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; name</p> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; originalUrl</p> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; thumbnailUrl</p> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">&nbsp;&nbsp;&nbsp; }</p> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">&nbsp; }</p> <p class="MsoNormal" style="margin-bottom: 0cm; line-height: normal;">}</p> </td> </tr> </tbody> </table> <p class="MsoNormal" style="text-align: left;">One of the biggest advantages is that content and media can now be retrieved through a single API layer.</p> <div class="MsoNormal" style="text-align: left;" align="center"><hr /></div> <h2 class="MsoNormal" style="text-align: left;"><strong>Using DAM Assets in Content Types</strong></h2> <p class="MsoNormal" style="text-align: left;">The connector enables DAM-specific property types.</p> <p class="MsoNormal" style="text-align: left;">Example:</p> <table class="MsoTableGrid" style="border-collapse: collapse; border-image: initial; height: 203px; width: 67.718%; border: medium none currentcolor;"> <tbody> <tr style="mso-yfti-irow: 0; mso-yfti-firstrow: yes; mso-yfti-lastrow: yes;"> <td style="width: 0%; border: 1pt solid windowtext; padding: 0cm 5.4pt; text-align: left; vertical-align: top;"> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">News Article Page</p> <p class="MsoListParagraphCxSpFirst" style="mso-add-space: auto; text-indent: -18.0pt; line-height: normal; mso-list: l0 level1 lfo1; margin: 0cm 0cm 0cm 54.0pt;"><!-- [if !supportLists]--><span style="mso-ascii-font-family: Aptos; mso-fareast-font-family: Aptos; mso-hansi-font-family: Aptos; mso-bidi-font-family: Aptos;"><span style="mso-list: Ignore;">-<span style="font: 7.0pt 'Times New Roman';">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span></span><!--[endif]-->Headline</p> <p class="MsoListParagraphCxSpMiddle" style="mso-add-space: auto; text-indent: -18.0pt; line-height: normal; mso-list: l0 level1 lfo1; margin: 0cm 0cm 0cm 54.0pt;"><!-- [if !supportLists]--><span style="mso-ascii-font-family: Aptos; mso-fareast-font-family: Aptos; mso-hansi-font-family: Aptos; mso-bidi-font-family: Aptos;"><span style="mso-list: Ignore;">-<span style="font: 7.0pt 'Times New Roman';">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span></span><!--[endif]-->Summary</p> <p class="MsoListParagraphCxSpLast" style="mso-add-space: auto; text-indent: -18.0pt; line-height: normal; mso-list: l0 level1 lfo1; margin: 0cm 0cm 0cm 54.0pt;"><!-- [if !supportLists]--><span style="mso-ascii-font-family: Aptos; mso-fareast-font-family: Aptos; mso-hansi-font-family: Aptos; mso-bidi-font-family: Aptos;"><span style="mso-list: Ignore;">-<span style="font: 7.0pt 'Times New Roman';">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span></span><!--[endif]-->Hero Image</p> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">Where:</p> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">Hero Image&nbsp;is a Bynder Image reference.</p> </td> <td style="width: 0%; border-width: 1pt 1pt 1pt medium; border-style: solid solid solid none; border-color: windowtext windowtext windowtext currentcolor; border-image: initial; padding: 0cm 5.4pt; text-align: left; vertical-align: top;"> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">Product Page</p> <p class="MsoListParagraphCxSpFirst" style="mso-add-space: auto; text-indent: -18.0pt; line-height: normal; mso-list: l0 level1 lfo1; margin: 0cm 0cm 0cm 54.0pt;"><!-- [if !supportLists]--><span style="mso-ascii-font-family: Aptos; mso-fareast-font-family: Aptos; mso-hansi-font-family: Aptos; mso-bidi-font-family: Aptos;"><span style="mso-list: Ignore;">-<span style="font: 7.0pt 'Times New Roman';">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span></span><!--[endif]-->Title</p> <p class="MsoListParagraphCxSpMiddle" style="mso-add-space: auto; text-indent: -18.0pt; line-height: normal; mso-list: l0 level1 lfo1; margin: 0cm 0cm 0cm 54.0pt;"><!-- [if !supportLists]--><span style="mso-ascii-font-family: Aptos; mso-fareast-font-family: Aptos; mso-hansi-font-family: Aptos; mso-bidi-font-family: Aptos;"><span style="mso-list: Ignore;">-<span style="font: 7.0pt 'Times New Roman';">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span></span><!--[endif]-->Product Image</p> <p class="MsoListParagraphCxSpMiddle" style="mso-add-space: auto; text-indent: -18.0pt; line-height: normal; mso-list: l0 level1 lfo1; margin: 0cm 0cm 0cm 54.0pt;"><!-- [if !supportLists]--><span style="mso-ascii-font-family: Aptos; mso-fareast-font-family: Aptos; mso-hansi-font-family: Aptos; mso-bidi-font-family: Aptos;"><span style="mso-list: Ignore;">-<span style="font: 7.0pt 'Times New Roman';">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span></span><!--[endif]-->Product Video</p> <p class="MsoListParagraphCxSpLast" style="mso-add-space: auto; text-indent: -18.0pt; line-height: normal; mso-list: l0 level1 lfo1; margin: 0cm 0cm 0cm 54.0pt;"><!-- [if !supportLists]--><span style="mso-ascii-font-family: Aptos; mso-fareast-font-family: Aptos; mso-hansi-font-family: Aptos; mso-bidi-font-family: Aptos;"><span style="mso-list: Ignore;">-<span style="font: 7.0pt 'Times New Roman';">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span></span><!--[endif]-->Product Brochure</p> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">Where:</p> <p class="MsoNormal" style="margin-bottom: 0cm; line-height: normal;">Each asset property can reference a different Bynder asset type i.e. BynderImage, BynderVideo, and BynderDocument</p> </td> </tr> </tbody> </table> <div class="MsoNormal" style="text-align: left;" align="center"><hr /></div> <h3 class="MsoNormal" style="text-align: left;"><strong>Frontend Consumption</strong></h3> <p class="MsoNormal" style="text-align: left;">Once data is available through Graph, frontend applications can retrieve and render it.</p> <p class="MsoNormal" style="text-align: left;">Example:</p> <table class="MsoTableGrid" style="border-collapse: collapse; margin-left: 0px; margin-right: auto; border-image: initial; height: 714px; width: 76.9944%; border: medium none currentcolor;"> <tbody> <tr style="mso-yfti-irow: 0; mso-yfti-firstrow: yes; mso-yfti-lastrow: yes;"> <td style="width: 0%; border: 1pt solid windowtext; padding: 0cm 5.4pt; vertical-align: top;"> <p class="MsoNormal" style="margin-bottom: 8pt; line-height: 115%; text-align: left;">query {</p> <p class="MsoNormal" style="margin-bottom: 8pt; line-height: 115%; text-align: left;">&nbsp; NewsArticle {</p> <p class="MsoNormal" style="margin-bottom: 8pt; line-height: 115%; text-align: left;">&nbsp;&nbsp;&nbsp; items {</p> <p class="MsoNormal" style="margin-bottom: 8pt; line-height: 115%; text-align: left;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; headline</p> <p class="MsoNormal" style="margin-bottom: 8pt; line-height: 115%; text-align: left;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; heroImage {</p> <p class="MsoNormal" style="margin-bottom: 8pt; line-height: 115%; text-align: left;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; name</p> <p class="MsoNormal" style="margin-bottom: 8pt; line-height: 115%; text-align: left;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; thumbnailUrl</p> <p class="MsoNormal" style="margin-bottom: 8pt; line-height: 115%; text-align: left;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; originalUrl</p> <p class="MsoNormal" style="margin-bottom: 8pt; line-height: 115%; text-align: left;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; transformBaseUrl</p> <p class="MsoNormal" style="margin-bottom: 8pt; line-height: 115%; text-align: left;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }</p> <p class="MsoNormal" style="margin-bottom: 8pt; line-height: 115%; text-align: left;">&nbsp;&nbsp;&nbsp; }</p> <p class="MsoNormal" style="margin-bottom: 8pt; line-height: 115%; text-align: left;">&nbsp; }</p> <p class="MsoNormal" style="margin-bottom: 8pt; line-height: 115%; text-align: left;">}</p> </td> <td style="width: 0%; border: 1pt solid windowtext; padding: 0cm 5.4pt; vertical-align: top;"> <p class="MsoNormal" style="margin-bottom: 8pt; line-height: 115%; text-align: left;">query {</p> <p class="MsoNormal" style="margin-bottom: 8pt; line-height: 115%; text-align: left;">&nbsp; Product {</p> <p class="MsoNormal" style="margin-bottom: 8pt; line-height: 115%; text-align: left;">&nbsp;&nbsp;&nbsp; items {</p> <p class="MsoNormal" style="margin-bottom: 8pt; line-height: 115%; text-align: left;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; title</p> <p class="MsoNormal" style="margin-bottom: 8pt; line-height: 115%; text-align: left;">&nbsp; &nbsp; &nbsp; productImage {</p> <p class="MsoNormal" style="margin-bottom: 8pt; line-height: 115%; text-align: left;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; name</p> <p class="MsoNormal" style="margin-bottom: 8pt; line-height: 115%; text-align: left;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; thumbnailUrl</p> <p class="MsoNormal" style="margin-bottom: 8pt; line-height: 115%; text-align: left;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; originalUrl</p> <p class="MsoNormal" style="margin-bottom: 8pt; line-height: 115%; text-align: left;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; transformBaseUrl</p> <p class="MsoNormal" style="margin-bottom: 8pt; line-height: 115%; text-align: left;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }</p> <p class="MsoNormal" style="margin-bottom: 8pt; line-height: 115%; text-align: left;">&nbsp; &nbsp; &nbsp; productVideo {</p> <p class="MsoNormal" style="margin-bottom: 8pt; line-height: 115%; text-align: left;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; name</p> <p class="MsoNormal" style="margin-bottom: 8pt; line-height: 115%; text-align: left;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; thumbnailUrl</p> <p class="MsoNormal" style="margin-bottom: 8pt; line-height: 115%; text-align: left;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; originalUrl</p> <p class="MsoNormal" style="margin-bottom: 8pt; line-height: 115%; text-align: left;">&nbsp; &nbsp; &nbsp; &nbsp; videoPreviewUrl</p> <p class="MsoNormal" style="margin-bottom: 8pt; line-height: 115%; text-align: left;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }</p> <p class="MsoNormal" style="margin-bottom: 8pt; line-height: 115%; text-align: left;">&nbsp; &nbsp; &nbsp; productBrochure{</p> <p class="MsoNormal" style="margin-bottom: 8pt; line-height: 115%; text-align: left;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; name</p> <p class="MsoNormal" style="margin-bottom: 8pt; line-height: 115%; text-align: left;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; thumbnailUrl</p> <p class="MsoNormal" style="margin-bottom: 8pt; line-height: 115%; text-align: left;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; originalUrl</p> <p class="MsoNormal" style="margin-bottom: 8pt; line-height: 115%; text-align: left;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }</p> <p class="MsoNormal" style="margin-bottom: 8pt; line-height: 115%; text-align: left;">&nbsp;&nbsp;&nbsp; }</p> <p class="MsoNormal" style="margin-bottom: 8pt; line-height: 115%; text-align: left;">&nbsp; }</p> <p class="MsoNormal" style="margin-bottom: 8pt; line-height: 115%; text-align: left;">}</p> </td> </tr> </tbody> </table> <div class="MsoNormal" style="text-align: left;" align="center"><hr /> <h3><strong>Asset Rendering:</strong></h3> </div> <table class="MsoTableGrid" style="border-collapse: collapse; margin-left: 0px; margin-right: auto; width: 75.9895%; border-image: initial; height: 186px; border: medium none currentcolor;"> <tbody> <tr style="mso-yfti-irow: 0; mso-yfti-firstrow: yes;"> <td style="width: 30.8527%; border: 1pt solid windowtext; padding: 0cm 5.4pt; text-align: left; vertical-align: top;"> <p class="MsoNormal" style="margin-bottom: 0cm; line-height: normal;"><strong>Rendering Images</strong></p> </td> <td style="width: 33.8999%; border-width: 1pt 1pt 1pt medium; border-style: solid solid solid none; border-color: windowtext windowtext windowtext currentcolor; border-image: initial; padding: 0cm 5.4pt; text-align: left; vertical-align: top;"> <p class="MsoNormal" style="margin-bottom: 0cm; line-height: normal;"><strong>Rendering Videos</strong></p> </td> <td style="width: 35.227%; border-width: 1pt 1pt 1pt medium; border-style: solid solid solid none; border-color: windowtext windowtext windowtext currentcolor; border-image: initial; padding: 0cm 5.4pt; text-align: left; vertical-align: top;"> <p class="MsoNormal" style="margin-bottom: 0cm; line-height: normal;"><strong>Rendering Documents</strong></p> </td> </tr> <tr style="mso-yfti-irow: 1; mso-yfti-lastrow: yes;"> <td style="width: 30.8527%; border-width: medium 1pt 1pt; border-style: none solid solid; border-color: currentcolor windowtext windowtext; border-image: initial; padding: 0cm 5.4pt; text-align: left; vertical-align: top;"> <p class="MsoNormal" style="margin-bottom: 0cm; line-height: normal;"><strong>Basic rendering:</strong><br />&lt;img src="{thumbnailUrl}" /&gt;</p> <div class="MsoNormal" style="margin-bottom: 0cm; text-align: center; line-height: normal;" align="center"><hr /></div> <p class="MsoNormal" style="margin-bottom: 0cm; line-height: normal;"><br /><strong>Responsive Rendering:</strong><br />&lt;img<br />src="{transformBaseUrl}?width=200" <br />/&gt;</p> </td> <td style="width: 33.8999%; border-width: medium 1pt 1pt medium; border-style: none solid solid none; border-color: currentcolor windowtext windowtext currentcolor; padding: 0cm 5.4pt; text-align: left; vertical-align: top;"> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;"><strong>Video example:</strong><br />&lt;video controls&gt;<br />&nbsp; &nbsp; &nbsp;&lt;source src="{originalUrl}" /&gt;<br />&lt;/video&gt;</p> <div class="MsoNormal" style="text-align: center;" align="center"><hr /></div> <p class="MsoNormal" style="margin-bottom: 0cm; line-height: normal;"><strong>Video Poster:<br /></strong>&lt;img src="{thumbnailUrl}" /&gt;</p> </td> <td style="width: 35.227%; border-width: medium 1pt 1pt medium; border-style: none solid solid none; border-color: currentcolor windowtext windowtext currentcolor; padding: 0cm 5.4pt; text-align: left; vertical-align: top;"> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;"><strong>PDF example:</strong><br />&lt;a href="{originalUrl}"&gt;<br />&nbsp; &nbsp; Download PDF<br />&lt;/a&gt;</p> <div class="MsoNormal" style="margin-bottom: 0cm; text-align: center; line-height: normal;" align="center"><hr /></div> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;"><strong>Preview example:<br /></strong>&lt;img src="{thumbnailUrl}" /&gt;</p> </td> </tr> </tbody> </table> <div class="MsoNormal" style="text-align: left;" align="center"><hr /></div> <h2 class="MsoNormal" style="text-align: left;">An ideal worflow (Bynder <span style="font-size: 12.0pt; line-height: 115%; font-family: Wingdings; mso-ascii-font-family: Aptos; mso-ascii-theme-font: minor-latin; mso-fareast-font-family: Aptos; mso-fareast-theme-font: minor-latin; mso-hansi-font-family: Aptos; mso-hansi-theme-font: minor-latin; mso-bidi-font-family: 'Times New Roman'; mso-bidi-theme-font: minor-bidi; mso-ansi-language: EN-IN; mso-fareast-language: EN-US; mso-bidi-language: AR-SA; mso-char-type: symbol; mso-symbol-font-family: Wingdings;"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings;">&agrave;</span></span>&nbsp;Optimizely <span style="font-size: 12.0pt; line-height: 115%; font-family: Wingdings; mso-ascii-font-family: Aptos; mso-ascii-theme-font: minor-latin; mso-fareast-font-family: Aptos; mso-fareast-theme-font: minor-latin; mso-hansi-font-family: Aptos; mso-hansi-theme-font: minor-latin; mso-bidi-font-family: 'Times New Roman'; mso-bidi-theme-font: minor-bidi; mso-ansi-language: EN-IN; mso-fareast-language: EN-US; mso-bidi-language: AR-SA; mso-char-type: symbol; mso-symbol-font-family: Wingdings;"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings;">&agrave;</span></span>&nbsp;Frontend application):</h2> <ol> <li style="text-align: left;">Asset will be uploaded into Bynder along with metadata.</li> <li style="text-align: left;">Asset will be marked as Public in Bynder (if asset must be available using a public URL).</li> <li style="text-align: left;">OCP Connector will sync the asset inforamtion into Optimizely Graph.</li> <li style="text-align: left;">Authors in Optimizely SaaS CMS will be able to ses/select the asset inside the content manager/content items for referencing on relevant fields.</li> <li style="text-align: left;">Content Items will be published in Optimizely SaaS CMS.</li> <li style="text-align: left;">Frontend application (nextjs) will retrieve the page item content along with asset URLs using Graph query.</li> <li style="text-align: left;">Appropriate URL of asset will be used to render/retrieve the asset infroamtion in the application/browser.</li> <li style="text-align: left;">If frontend application needs asset information that is not synced in Optimizely but available in Bynder then frontend application will use Bynder APIs to retrieve the information.</li> </ol> <div class="MsoNormal" style="text-align: left;" align="center"><hr /></div> <h2 class="MsoNormal" style="text-align: left;"><strong>Public vs Private Assets</strong></h2> <p class="MsoNormal" style="text-align: left;">One area that deserves special attention is asset visibility.</p> <table class="MsoTableGrid" style="border-collapse: collapse; width: 67.1769%; height: 327px; border-image: initial; border: medium none currentcolor;"> <tbody> <tr style="height: 308.862px;"> <td style="width: 50.0644%; border: 1pt solid windowtext; padding: 0cm 5.4pt; text-align: left; vertical-align: top; height: 308.862px;"> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;"><strong>Public Assets</strong></p> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">IsPublic = true</p> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">Typically means:</p> <ul> <li class="MsoNormal" style="line-height: 115%;">Frontend can access asset directly.</li> <li class="MsoNormal" style="line-height: 115%;">No authentication required.</li> </ul> </td> <td style="width: 50.0644%; border-width: 1pt 1pt 1pt medium; border-style: solid solid solid none; border-color: windowtext windowtext windowtext currentcolor; border-image: initial; padding: 0cm 5.4pt; text-align: left; vertical-align: top; height: 308.862px;"> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;"><strong>Non-Public Assets</strong></p> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">IsPublic = false</p> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">Potential implications:</p> <ul> <li class="MsoNormal" style="line-height: 115%;">Requires authentication</li> <li class="MsoNormal" style="line-height: 115%;">Requires authorization</li> <li class="MsoNormal" style="line-height: 115%;">URL will not be accessible publicly</li> </ul> <p class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%;">This becomes extremely important for:</p> <ul> <li>Extranets</li> <li>Employee portals</li> <li class="MsoNormal" style="margin-bottom: 8.0pt; line-height: 115%; mso-list: l0 level1 lfo1; tab-stops: list 36.0pt;">Restricted content</li> </ul> <p style="margin-bottom: 8pt; line-height: 115%;">Use <a href="https://bynder-api-documentation.readme.io/reference/get_api-v4-media-id-download">Retrieve asset download</a> location from Bynder API to get the URL to dowlaod the asset item.</p> </td> </tr> </tbody> </table> <div class="MsoNormal" style="text-align: left;" align="center"><hr /></div> <h2 class="MsoNormal" style="text-align: left;"><strong>Things I Learned</strong></h2> <p class="MsoNormal" style="text-align: left;">After exploring Bynder and the connector, several observations stood out.</p> <ul> <li style="text-align: left;"><strong>Not every asset type exposes the same URLs<br /></strong>Images typically expose more transformation capabilities than videos or documents.</li> </ul> <div class="MsoNormal" style="text-align: left;" align="center"> <ul> <li><strong>Transform Base URL is incredibly useful<br /></strong>The Transform Base URL alone can eliminate the need for multiple image renditions.</li> </ul> </div> <div class="MsoNormal" style="text-align: left;" align="center"> <ul> <li><strong>Public vs Private matters early<br /></strong>Teams should decide asset visibility strategy before building the frontend application.<br />Changing this later can require rework.</li> </ul> </div> <div class="MsoNormal" style="text-align: left;" align="center"><hr /></div> <h2 class="MsoNormal" style="text-align: left;"><strong>Things to Validate Early</strong></h2> <ul> <li class="MsoNormal" style="text-align: left;"><strong>Metadata Availability</strong> <ul> <li class="MsoNormal" style="text-align: left;">Not every Bynder field is necessarily synchronized.</li> <li class="MsoNormal" style="text-align: left;">Always validate: <ul> <li class="MsoNormal" style="text-align: left;">Which fields are available?</li> <li class="MsoNormal" style="text-align: left;">Which fields are searchable?</li> <li class="MsoNormal" style="text-align: left;">Which fields appear in Graph?<br /><br /></li> </ul> </li> </ul> </li> <li class="MsoNormal" style="text-align: left;"><strong>Filtering of Assets</strong> <ul> <li class="MsoNormal" style="text-align: left;">You may not need to have all assets in Optimizely. Ideally Assets used on your website or target channel must be synced but rest assets should be avoided.<br />Read the article <a href="/link/30275ac47c4843148eeda8b7d6ed282a.aspx">[Planning Your Bynder DAM and Optimizely SaaS CMS Integration the Right Way: Avoiding Asset Sprawl and Unnecessary Synchronization]</a><br /><br /></li> </ul> </li> <li class="MsoNormal" style="text-align: left;"><strong>Private Asset Consumption</strong> <ul> <li class="MsoNormal" style="text-align: left;">Private assets often introduce additional frontend delivery considerations.</li> <li class="MsoNormal" style="text-align: left;">Validate architecture before implementation.</li> </ul> </li> </ul> <div class="MsoNormal" style="text-align: left;" align="center"> <ul> <li><strong>Transformation Support</strong> <ul> <li>Image transformations are powerful.</li> <li>Equivalent functionality may not exist for every asset type.&nbsp;</li> </ul> </li> </ul> </div> <div class="MsoNormal" style="text-align: left;" align="center"> <ul> <li><strong>Connector Scope</strong> <ul> <li>The connector solves many DAM scenarios, but not every possible Bynder feature, or workflow may be surfaced through the OOTB connector.<br /><br /></li> </ul> </li> <li><strong>Language Translation</strong> <ul> <li>Bynder does not have concept of language version of asset items hence if you need to store language specific content in your assets metadata properties then figure out where that content will be stored and how the translation workflow will be executed. One of the options to keep language specific content inside Bynder is to create language specific properties e.g. Title_en, Title_fr etc. These properties can then be read through the <a href="https://bynder-api-documentation.readme.io/reference/get_api-v4-media-id">Retrieve specific asset</a> endpoint.</li> <li>Also note that&nbsp; Bynder allows to set the language specific labels for the options inside single select and multi-select properties. But when you retrieve assets information using the API it only returns the default language labels. In case you need language specific labels in your frontend application then you need to get all metadata properties using <a href="https://bynder-api-documentation.readme.io/reference/get_api-v4-metaproperties">Retrieve metaproperties</a> API endpoint.</li> </ul> </li> </ul> </div> <div class="MsoNormal" style="text-align: left;" align="center"><hr /></div> <h2 class="MsoNormal" style="text-align: left;"><strong>Frequently Asked Questions</strong></h2> <ol> <li style="text-align: left;"><strong>Does the connector synchronize custom metadata fields?<br /></strong>All text type metadata fields in Bynder are supposed to be exposed through synchronization but actual synchronization depends on the connector configuration. <br />Always validate available fields before finalizing content models.<br /><br /></li> <li style="text-align: left;"><strong>Can filtering of assets be set during sync configuration?<br /></strong>OOTB connector does not support filtering; it is developed to sync all assets.<br /><span class="far4bl _667h42">The connector itself has no filtering UI, but selective synchronization can be achieved through Bynder's permission profiles and metadata visibility rules &mdash; see <a href="/link/30275ac47c4843148eeda8b7d6ed282a.aspx">[Planning Your Bynder DAM and Optimizely SaaS CMS Integration the Right Way: Avoiding Asset Sprawl and Unnecessary Synchronization]</a>.</span><br />Or Using the Bynder API custom connector can be developed to support filtering and other required features based on your business needs.&nbsp;<br /><br /></li> <li style="text-align: left;"><!-- [if !supportLists]--><strong>Can I call Bynder APIs directly from my frontend application?<br /></strong>Absolutely. A common pattern is:&nbsp;DAM Connector + Bynder APIs.&nbsp;<br />The connector handles asset references while custom APIs handle advanced functionality.<br />Use <a href="https://bynder-api-documentation.readme.io/reference/get_api-v4-media-id">Retrieve specific asset</a> endpoint from Bynder API to retrieve metadata and URLs (including custom metadata) for a specific assets.<br /><br /></li> <li style="text-align: left;"><!-- [if !supportLists]--><strong>What if information is not synchronized?<br /></strong>Retrieve it directly from Bynder APIs. Examples: Workflow Status, Usage Rights, Approval State, Custom Metadata.<br /><br /></li> <li style="text-align: left;"><!-- [if !supportLists]--><strong>Can frontend applications retrieve private assets?<br /></strong>It depends on the DAM security model and implementation approach.&nbsp;<br />Possible solutions include: Authentication, Proxy APIs, Token-based access.</li> </ol> <div class="MsoNormal" style="text-align: left;" align="center"><hr /></div> <h2 class="MsoNormal" style="text-align: left;"><strong>Final Thoughts</strong></h2> <p class="MsoNormal" style="text-align: left;">The Bynder DAM Connector provides a clean bridge between enterprise asset management and modern headless content delivery.</p> <p class="MsoNormal" style="text-align: left;">The most important takeaway for me was that the connector is not simply an asset picker. It establishes a relationship between:</p> <p class="MsoNormal" style="text-align: left;">Bynder DAM <span style="font-family: Wingdings; mso-ascii-font-family: Aptos; mso-ascii-theme-font: minor-latin; mso-hansi-font-family: Aptos; mso-hansi-theme-font: minor-latin; mso-char-type: symbol; mso-symbol-font-family: Wingdings;"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings;">&agrave;</span></span> Optimizely Graph &amp; Optimizely CMS <span style="font-family: Wingdings; mso-ascii-font-family: Aptos; mso-ascii-theme-font: minor-latin; mso-hansi-font-family: Aptos; mso-hansi-theme-font: minor-latin; mso-char-type: symbol; mso-symbol-font-family: Wingdings;"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings;">&agrave;</span></span> Frontend Applications</p> <p class="MsoNormal" style="text-align: left;">When implemented correctly, it enables organizations to maintain Bynder as the single source of truth for digital assets while still providing content authors with a seamless CMS authoring experience.</p> <p class="MsoNormal" style="text-align: left;">For organizations already invested in Bynder and Optimizely SaaS CMS, the connector can significantly simplify asset governance, reduce duplication, and improve overall content delivery architecture.</p> <div class="MsoNormal" style="text-align: left;" align="center"><hr /></div> <h4 class="_1l4j4na1 _1qskm0h c8urk _1a0p899 _5hqrjx _667h42" style="text-align: left;">📚 Bynder + Optimizely SaaS CMS Integration Series</h4> <div class="_1l4j4na3 _667h42" style="text-align: left;"><em class="far4bl _667h42">This article is the first installment of a 3-part comprehensive architecture guide:</em></div> <ul class="_667h42 _1l4j4na6"> <li class="_667h42 _1l4j4na2" style="text-align: left;"><strong class="far4bl _1a0p899 _667h42">👉 Part 1: Implementing the Connector &mdash; Lessons Learned</strong>&nbsp;<em class="far4bl _667h42">(You are here)</em><br /><em class="far4bl _667h42">What metadata syncs, how URLs behave, and how to query/render assets in a Next.js frontend.<br /><br /></em></li> <li class="_667h42 _1l4j4na2" style="text-align: left;"><strong class="far4bl _1a0p899 _667h42">⏭️ Part 2:&nbsp;<a class="_667h42 _1l4j4nac _1c9dtv3 _1by2b93 _1140xq1 _667h42" href="/link/30275ac47c4843148eeda8b7d6ed282a.aspx">Planning &amp; Filtering &mdash; Avoiding Asset Sprawl and Unnecessary Sync</a></strong><br /><em class="far4bl _667h42">Discover how we achieved metadata-based sync filtering with zero custom code.<br /><br /></em></li> <li class="_667h42 _1l4j4na2" style="text-align: left;"><strong class="far4bl _1a0p899 _667h42">⏭️ Part 3:&nbsp;<a class="_667h42 _1l4j4nac _1c9dtv3 _1by2b93 _1140xq1 _667h42" href="/link/650c1d72d9a84c28b2355e8942fc7cda.aspx">Exploring Asset Lifecycle Management &amp; Three-Gate Governance</a></strong><br /><em class="far4bl _667h42">Explore a webhook-driven, three-gate model to handle asset updates, environments, and usage verification.</em></li> </ul> </div> </div>2026-07-03T12:46:54.0000000ZBlog post