​
How to embed the swag catalog manager

To allow embedding our iframe, please contact rnd@covver.io to add your domain to our Content Security Policy
1

Create a company

If this is the first visit of a customer, you should create a company using the Create Company API. In response, you will receive a companyId and a companySlug.

2

Create a token for this company

Use the Create OAuth Tokens API to get a refreshToken and accessToken for this company. Make sure to pass the companyId to get a token for this specific customer.

3

Show a pre-authenticated iframe

Use the accessToken, refreshToken and companySlug in the iframe URL as follows:

`https://dev-admin.covver.io/catalog-manager/v1/${companySlug}/home?covverAccessToken=${accessToken}&covverRefreshToken=${refreshToken}`
Note to replace dev-admin.covver.io to admin.covver.io when using the live environment

​
Deep linking the iframe

You can choose to show the iframe on a specific page:

​
Catalog page (manage collections):

`https://dev-admin.covver.io/catalog-manager/v1/${companySlug}/home`

​
Collection page (manage products):

`https://dev-admin.covver.io/catalog-manager/v1/${companySlug}/collections/${collectionSlug}/products`

​
Design editor (edit a specific product):

`https://dev-admin.covver.io/catalog-manager/v1/${companySlug}/collections/${collectionSlug}/products?editProductId=${productId}`
Always include the ?covverAccessToken=${accessToken}&covverRefreshToken=${refreshToken} query params

​
Listen to post messages

Register to post messages to listen to events within the iframe:

  function handler<T extends PostMessageType>(ev: MessageEvent<any>) {
    const msg = ev.data;
    if (!msg?.cvr) {
      return;
    }
    // Check ev.source
    const type: T = msg.type;
    const data: PostMessageDataType[T] = typeof msg.data === 'string' ? JSON.parse(msg.data) : msg.data;
    console.log(type, data);
  }

  window.addEventListener('message', handler);

Event types:

export const enum PostMessageType {
  // Catalog Manager Events:
  GoToCollection = 'GoToCollection',
  AddCollection = 'AddCollection',
  RemoveCollection = 'RemoveCollection',
  // Collection Page Events:
  GoToCatalogManager = 'GoToCatalogManager',
  GoToDesignEditor = 'GoToDesignEditor',
  AddProduct = 'AddProduct',
  HideProduct = 'HideProduct',
  ShowProduct = 'ShowProduct',
  EditCollectionName = 'EditCollectionName',
  ReplaceLogo = 'ReplaceLogo',
  // Design Editor Events:
  SaveProduct = 'SaveProduct',
  CancelSaveProduct = 'CancelSaveProduct',
  TalkWithADesigner = 'TalkWithADesigner',
}
type PostMessageDataType = {
  // Catalog Manager Events:
  AddCollection: { collectionSlug: string };
  GoToCollection: { collectionSlug: string };
  RemoveCollection: { collectionSlug: string };
  // Collection Page Events:
  GoToCatalogManager: undefined;
  GoToDesignEditor: { collectionSlug: string, productId: string };
  AddProduct: { collectionSlug: string, productId: string };
  HideProduct: { collectionSlug: string, productId: string };
  ShowProduct: { collectionSlug: string, productId: string };
  EditCollectionName: { collectionSlug: string, newTitle: string };
  ReplaceLogo: { collectionSlug: string, newLogoUrl: string };
  // Design Editor Events:
  SaveProduct: { collectionSlug: string, productId: string };
  CancelSaveProduct: { collectionSlug: string, productId: string };
  TalkWithADesigner: undefined
};