@giosg/ib-thumbnails

Performant way to show preview images of interactions

Usage in react

Install with

npm install --save @giosg/ib-thumbnails

And then use in component

const YourComponent = () => {
  // These values for the interaction variable can be fetched from v2 interaction listing api.
  // https://docs.giosg.com/api_reference/interaction_designer/interaction_designer_interactions_api/#list-of-interactions

  const interaction = {
    id: "interaction-id";
    thumbnail_view_count: 4;
    updated_at: "";
  }

  return <ThumbnailImagePreview interaction={item} width={200} height={200}  />
}

Alternatively if you don't have view count you can call it this way:

const YourComponent = () => {
  // These values for the interaction variable can be fetched from v2 interaction listing api.
  // https://docs.giosg.com/api_reference/interaction_designer/interaction_designer_interactions_api/#list-of-interactions

  const interaction = {
    id: "interaction-id";
    organization_id: "your-org-id"
  }
  const token = "Bearer eyJ...";

  return (
    <ThumbnailImagePreview
      authToken={token}
      interaction={item}
      width={200}
      height={200}
      onReadyEvent={() => alert('ready')}
    />
  );
}