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
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
.
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.
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
};