Skip to content

Wait for Icon Visualizer readiness

Icon Visualizer dispatches iconfigurator.ready on document after initialization and initial plugin lifecycle work are complete.

Register listeners before loading the embed script:

html
<script>
  document.addEventListener('iconfigurator.ready', (event) => {
    const api = event.detail
    console.log('Icon Visualizer is ready', api.getSnapshot())
  })

  document.addEventListener('iconfigurator.failed', (event) => {
    console.error('Icon Visualizer failed to start', event.detail.error)
  })
</script>

<div id="icf_page"></div>
<script src="https://iconfigurators.app/src/embed.cfm?ky=CONFIGURATOR_KEY"></script>

Await the global API

After window.iConfigurator exists, ready() resolves to the same host API carried by the ready event:

js
const api = await window.iConfigurator.ready()
console.log(api.status)

ready() resolves only after successful startup. If the app fails, the promise rejects and iconfigurator.failed is dispatched.

Avoid polling

Do not poll indefinitely for window.iConfigurator. Code that can execute before the embed should listen for iconfigurator.ready. Code loaded after the global exists can call ready().

The product event app:ready is available inside plugins. Host pages use the document event or global promise shown above.

Icon Visualizer developer documentation