API

One of the coolest features, in our opinion, is the ability to link your opengraph images and dynamically change the destination based on the latest render data. When leveraging a clientside framework like React , Vue.js , Svelte , or Ember.js for compositing images you often need to wait for elements to finish loading. To support this, we provide an API via the __og global variable to defer the render completion until you are absolutley ready. All renders are limited to a maximum of 5 seconds before it will be timed out and the default image is returned.

Adding the __og global variable requires you to push the ['ready'] helper or promise onto the stack telling the image renderer your content is ready for capture.

If you are not using the __og global variable, the renderer will wait for all fonts and images on the page to load.

Promises

You can also use a promise to delay the render. Promises will be times out after 5 seconds and your default image will be returned.

window.__og = [
  async () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          link: 'https://www.example.com?utm_source=',
          clip: {
            x: 0,
            y: 0,
            width: 1200,
            height: 600,
          },
          metadata: {
            id: 1,
            name: 'Jill Gamer',
          },
        });
      }, 1000);
    });
  };
];

Helpers

We’ve built in some common helpers to assist with your integration.

window.__og = [
  ['preload', 'fonts', 'https://images.unsplash.com/photo-1636333825251-d921e6ff88e4'],
  ['link', 'https://www.example.com?utm_source='],
  ['clip', 0, 0, 1200, 600],
  ['metadata', {
    id: 1,
    name: 'Jill Gamer'
  }],
  ['ready'],
];

[‘ready’]

This is required (unless you are using a promise) to signal the the image renderer that your content is ready for capture.

[‘preload’, …args]

Arguments

• ‘fonts’ - Waits for all the fonts to load before rendering
• image url - Waits for the image to load before rendering

[‘clip’, x, y, width, height]

Allows you to return a clipped portion of the image. Clipping requires the Professional Plan.

[’link’, url]

Sets the url to redirect the user when using link.opengraphimage.com

[‘metadata’, data]

Sets the x-ogi-meta header when “Send Metadata Header” is checked in your origin config.