# Legacy jQuery site, can I fetch slot content and inject it into the DOM myself?

Asked by garyp on 2024-04-16. Tags: javascript, jquery, legacy, setup.

I maintain a site that was built in 2009 and it is jQuery all the way down. No
bundler, no build step, no npm. Just script tags and a server that
serves HTML like God intended.

Marketing wants to personalize the homepage banner. Can I load Croct from a plain
script tag, fetch the slot content, and jam it into the page with `$('#banner')`
like it's 2012? Or does this thing assume I have a React app and a webpack config

Asking before I promise anything to anyone.

## 1 answer

### Accepted answer from dmccrae (2024-04-17)

You are in luck, this works fine and is a documented setup. No build step needed.

Load the SDK from the CDN, plug it, fetch the slot, and render however you want:

```html
<script src="https://cdn.croct.io/js/v1/lib/plug.js"></script>
<script>
  croct.plug({appId: 'APPLICATION_ID'});

  croct.fetch('home-banner@1')
    .catch(function () {
      return {content: {title: 'Welcome back', cta: 'Shop now'}};
    })
    .then(function (result) {
      $('#banner h2').text(result.content.title);
      $('#banner .cta').text(result.content.cta);
    });
</script>
```

Two things worth doing:

1. Pin the slot version (`home-banner@1`) so a schema change in the dashboard
   cannot break your rendering code later.
2. Keep that `.catch` returning a hardcoded default. If the network request
   fails or gets blocked, the banner falls back to your static content instead
   of leaving the section empty.

jQuery, vanilla DOM, Mustache templates, whatever you have. The SDK just hands
you a content object, rendering is entirely your business.

#### Reply from garyp (2024-04-17)

Beautiful. The catch-with-fallback pattern is exactly the kind of paranoia
this site runs on. Thanks, will report back if the 2009 codebase fights me.