(async function () {
 try {
   if (!context.element) {
     return;
   }
   context.element.textContent = config.loadingText || 'Loading…';
   const response = await fetch(config.endpointUrl, {
     headers: { Accept: 'application/json' },
   });
   if (!response.ok) {
     throw new Error(`Request failed with status ${response.status}`);
   }
   const data = await response.json();
   // Built as DOM nodes rather than an innerHTML string: the response is data,
   // not trusted markup, and textContent can't smuggle in a <script>.
   const card = document.createElement('div');
   card.style.display = 'flex';
   card.style.gap = '12px';
   card.style.alignItems = 'flex-start';
   if (data.thumbnail) {
     const image = document.createElement('img');
     image.src = data.thumbnail;
     image.alt = '';
     image.width = 72;
     image.height = 72;
     image.style.flexShrink = '0';
     image.style.borderRadius = '6px';
     image.style.objectFit = 'cover';
     card.append(image);
   }
   const copy = document.createElement('div');
   // Each line is added only if the field came back, so pointing this at your
   // own API degrades to whatever it does return instead of printing
   // "undefined". Swap these for your own fields.
   // Longhand, not the `font` shorthand: the shorthand needs a font-family,
   // and naming one here would override the experience's own type.
   const addLine = function (text, options) {
     if (text === undefined || text === null || text === '') {
       return;
     }
     const line = document.createElement('p');
     line.style.margin = '0 0 4px';
     line.style.fontSize = options.size;
     line.style.lineHeight = '1.35';
     if (options.bold) {
       line.style.fontWeight = 'bold';
     }
     line.textContent = String(text);
     copy.append(line);
   };
   addLine(data.title, { size: '15px', bold: true });
   addLine(
     [data.brand, data.rating ? `★ ${data.rating}` : null]
       .filter(Boolean)
       .join(' · '),
     { size: '13px' }
   );
   addLine(data.price ? `$${data.price}` : null, {
     size: '15px',
     bold: true,
   });
   addLine(data.description, { size: '13px' });
   card.append(copy);
   context.element.replaceChildren(card);
 } catch (error) {
   // Leave the block empty rather than stuck on the loading message.
   if (context.element) {
     context.element.textContent = '';
   }
   context.reportError(`Could not load data: ${String(error)}`);
 }
})();

Acco(function () {
 try {
   if (!context.element) {
     return;
   }
   // Calendly's iframe is width="100%" height="100%", so the container needs a
   // real `height` — a percentage resolves against `auto` and the iframe falls
   // back to its intrinsic ~150px and scrolls its own content. `min-height` is
   // NOT enough. This mirrors Calendly's own markup: min-width:320px;height:Npx.
   context.element.style.height = `${config.height}px`;
   context.element.style.minWidth = '320px';
   // widget.js is declared under External dependencies, so it has already
   // loaded by the time this runs — there is nothing to await.
   if (!window.Calendly) {
     context.reportError('Calendly did not load.');
     return;
   }
   // Pasted scheduling links carry whatever the author copied — a `?month=`
   // prefill, a tracking parameter, sometimes a `#` fragment. Appending the
   // flag as text gets both wrong: a second `?` invalidates the URL, and
   // anything after a `#` is fragment, which never reaches Calendly. `URL`
   // puts it in the query regardless of what else is there.
   const url = new URL(config.calendlyUrl);
   if (config.hideEventTypeDetails) {
     url.searchParams.set('hide_event_type_details', '1');
   }
   window.Calendly.initInlineWidget({
     url: url.toString(),
     // `parentElement` takes the node directly, so the widget lands inside the
     // block without a document-scoped selector lookup.
     parentElement: context.element,
     // Calendly only self-styles when asked; its default is `inlineStyles:
     // false`, which assumes you loaded widget.css. We can't declare a
     // stylesheet (External dependencies is JavaScript-only), so let the
     // widget position itself and handle mobile.
     inlineStyles: true,
   });
   context.sendEvent('snippet_calendly_shown', { stepId: context.step.id });
 } catch (error) {
   context.reportError(`Calendly snippet failed: ${String(error)}`);
 }
})();rdion Body

// 1. Paste the vendor's script URL into "External dependencies" below the code.
//    It loads before this runs. Don't take the URL from a custom variable —
//    anyone who uses this snippet in a flow can edit those.
// 2. Replace `VendorSDK` and the mount call with the vendor's own.
(function () {
 try {
   if (!context.element) {
     return;
   }
   if (!window.VendorSDK) {
     context.reportError('The vendor script did not load.');
     return;
   }
   // Prefer an option that takes a DOM node — pass `context.element` — over one
   // that takes a CSS selector string.
   window.VendorSDK.render({
     container: context.element,
     id: config.widgetId,
   });
   context.sendEvent('snippet_vendor_mounted', { stepId: context.step.id });
 } catch (error) {
   context.reportError(`Could not mount the widget: ${String(error)}`);
 }
})();

(function () {
 try {
   // ─── Edit these two lines ────────────────────────────────────────
   // Point them at the function you want to call. `isAvailable` should
   // check the same thing `call` is about to use, so a page that hasn't
   // finished loading reports a clear error instead of throwing.
   const isAvailable = () =>
     typeof window.myApp?.support?.openPanel === 'function';
   const call = argument => window.myApp.support.openPanel(argument);
   // ─────────────────────────────────────────────────────────────────
   if (!isAvailable()) {
     context.reportError('That function is not available on this page.');
     return;
   }
   // Empty text fields arrive as '', which is a real argument — send
   // undefined instead so the function sees no argument at all.
   call(config.argument || undefined);
   context.sendEvent('snippet_function_called', { stepId: context.step.id });
 } catch (error) {
   context.reportError(`Could not make the call: ${String(error)}`);
 }
})();

(function () {
 try {
   // Add a provider by adding a row. `isPresent` should be cheap and must not
   // throw; `open` runs only after `isPresent` returns true.
   const providers = [
     {
       name: 'intercom',
       isPresent: () => typeof window.Intercom === 'function',
       open: () => window.Intercom('show'),
     },
     {
       name: 'zendesk',
       isPresent: () => typeof window.zE === 'function',
       open: () => {
         // Zendesk ships two widgets under the same `zE` global. The modern
         // messenger takes 'messenger'; the older classic widget takes
         // 'webWidget' and throws on the first. Trying rather than sniffing a
         // version flag keeps this working across both.
         try {
           window.zE('messenger', 'open');
         } catch {
           window.zE('webWidget', 'open');
         }
       },
     },
     {
       // Unverified: Drift's developer docs went offline after the Salesloft
       // acquisition. `openChat` is the long-standing documented call, and
       // `isPresent` checks for it specifically, so a rename fails over to the
       // next provider rather than throwing. Test against a live Drift page.
       name: 'drift',
       isPresent: () => typeof window.drift?.api?.openChat === 'function',
       open: () => window.drift.api.openChat(),
     },
     {
       name: 'hubspot',
       isPresent: () =>
         typeof window.HubSpotConversations?.widget?.open === 'function',
       open: () => window.HubSpotConversations.widget.open(),
     },
   ];
   // First match wins, so a page running two widgets opens the one listed
   // highest. Reorder the rows above to change that.
   const provider = providers.find(candidate => candidate.isPresent());
   if (!provider) {
     context.reportError('No support chat widget was found on this page.');
     return;
   }
   provider.open();
   // `provider` rides along so you can see which tool people actually used.
   context.sendEvent('snippet_support_chat_opened', {
     provider: provider.name,
     stepId: context.step.id,
   });
 } catch (error) {
   context.reportError(`Could not open support chat: ${String(error)}`);
 }
})();

(async function () {
 try {
   // `context.querySelector` returns an array, not a node.
   const trigger = context.querySelector(config.clickSelector)[0];
   if (!trigger) {
     context.reportError(`Could not find ${config.clickSelector} to click.`);
     return;
   }
   trigger.click();
   if (!config.waitForSelector) {
     return;
   }
   // The manifest's 5000 seeds the form field, but an optional number the
   // author clears is saved as nothing — and `setTimeout(fn, undefined)` fires
   // on the next tick, so the wait would collapse to zero and report a timeout
   // that never happened.
   const timeoutMs = config.timeoutMs ?? 5000;
   await new Promise(function (resolve) {
     const found = function () {
       return context.querySelector(config.waitForSelector)[0];
     };
     if (found()) {
       resolve();
       return;
     }
     const observer = new MutationObserver(function () {
       if (found()) {
         finish();
       }
     });
     const timer = setTimeout(function () {
       context.reportError(
         `${config.waitForSelector} did not appear within ${timeoutMs}ms.`
       );
       finish();
     }, timeoutMs);
     // Declared last so both the observer and the timer can reach it (function
     // declarations hoist). Every path routes through here, so nothing —
     // observer or timer — survives the step.
     function finish() {
       clearTimeout(timer);
       observer.disconnect();
       resolve();
     }
     observer.observe(document.body, { childList: true, subtree: true });
   });
 } catch (error) {
   context.reportError(`Could not prepare the page: ${String(error)}`);
 }
})();