Appearance

Main Concepts ​

User activity in CatalogIQ is centered around a concept of pitchdecks. A pitchdeck is composed of different components to create a rich interactive document / presentation for the sales representative to use during the sales process. Pitchdeck can be presented to the sales prospect in a web browser or in a native application during the sales meeting. It can also be shared via email or other means. Shared pitchdeck can be viewed by the sales prospect in Digital Sales Room (DSR) as a website or as a PDF.

When a CRM integration is enabled, pitchdecks can be connected to a CRM Account. This allows the system to auto-generate pitchdecks tailored to the specific account.

Canvas ​

Internally, a pitchdeck is an instance of the canvas. A canvas is a collection of components represented as a JSON object tree.

Components can be of different types such as product lists, documents, images, videos, text/html, buttons and custom app components that can be developed to extend native capabilities.

Product is a special type of component that represents a product catalog item. Product is a canvas component tree itself and any updates to the product are reflected in the canvases that use it.

Apart from the components, a canvas also contains a context object that holds the state used by any of the canvas components. Context can be manipulated by app components to persist data and communicate between each other.

Component Types ​

CatalogIQ supports various component types, including:

  • Block: Reusable component collections created by administrators
  • Carousel: Image/content sliders with rotating gallery functionality
  • CollectionPlayer: Groups and displays media collections
  • ContentGrid: Displays content collections in grid or list layouts
  • DataCharts: Data visualizations in various chart formats
  • DynamicDataTable: Interactive tables for structured data
  • Embeddable: Custom application components embedded in canvases
  • Grid/GridItem: Layout components for organized content placement
  • Html: Custom HTML code insertion
  • IFrame: Embeds external web resources
  • Link: Interactive elements for guided user actions
  • Multimedia: Displays images, videos, and other media
  • Page: Groups content into a single presentation page
  • PageBreak: Splits content across multiple pages
  • Root: Base container for all other components
  • Scribble: Drawing and annotation tools
  • SectionList: Presents content in list format using sections
  • Text: Rich text with CRM data enhancement
  • Timeline: Chronological event sequences

Each component type has predefined properties including allowed children, default data, and printable/singleton settings.

Application ​

Applications are the main way to extend the functionality of CatalogIQ. Apps can plug into different parts of the platform:

  • Canvas components: Custom UI components embedded in canvases
  • Canvas hooks: Background processes for canvas interaction
  • Post-call forms: Forms shown after sales calls
  • Sidebar applications: Apps displayed in the sidebar
  • Admin applications: Administrative tools and interfaces
  • Interactive content: Dynamic, interactive elements

Applications in CatalogIQ are loaded as web pages inside iframes with APIs exposed for communication between the app and the platform. Application is a zip file containing a manifest file app.json and static files. The manifest file describes the type and main properties of the application. Static files are the files that are served to the user when the application is opened with index.html as the entry point.

Communication ​

Applications can communicate with the platform and with each other using several mechanisms:

  1. Canvas Context: Primary method for sharing persistent data
  2. Event Broadcasting: For real-time communication without persistence
  3. Browser Storage: For sharing data within the browser session
  4. Apps DB: For structured data that needs to persist across sessions

Optionally an application can have a configuration file app.config.json that can be used to define the configuration page of the application. The configuration page is used to set up the application and can be opened from the CatalogIQ Admin UI.

Applications can communicate with the platform using the @pitcher/js-api npm package. The package exposes methods to interact with the platform and allows to listen to events from the platform.