Web Component Integration in Copyl

Copyl's architecture allows for seamless integration of custom-built components, offering a strategic advantage for businesses looking to tailor their digital solutions. This feature empowers developers to create bespoke functionalities that can be easily incorporated into the Copyl ecosystem.

Strategic Benefits

1. Customization – Build components to address specific business needs.
2. Flexibility – Modify and extend apps without touching core logic.
3. Innovation – Use modern frontend technologies and frameworks.
4. Scalability – Grow your capabilities by adding more components over time.
5. Maintenance – Update individual components independently.

Ease of Integration

1. Web Component Standard – Use Custom Elements and Shadow DOM.
2. Simple Web Component Registration – Register via Copyl’s Widget Registry in the App Builder.
3. Automatic Resource Management – Copyl dynamically loads, renders, and destroys widgets.
4. Copyl Styling – Copyl injects its standard CSS directly into the Shadow DOM.

Development Process

1. Create – Build using standard Web Component APIs.
2. Fetch Copyl Styling – Load CSS from https://c.copyl.com/assets/components/copyl.css.
3. Register – Add the component to Copyl’s widget registry.
4. Use – Insert using app-widget-wrapper, pass parameters via widgetConfig.

Getting User Context to your Web Component

Your Web Component will be injected with these parameters:

• jwt : the token from Copyl Sign-in
• userId : the unique user id from Copyl
• email : the user’s verified email
• roles : a list of the roles the user has in Copyl
• enterpriseId : the unique tenant id the company has in Copyl
• theme : the user’s selected ui theme
• licenses : the user’s licenses in Copyl

injectMetaInfo() {
    const meta = {
        jwt: this.getAttribute('**jwt**'),
        userId: this.getAttribute('**user-id**'),
        email: this.getAttribute('**email**'),
        roles: this.getAttribute('**roles**'),
        enterpriseId: this.getAttribute('**enterprise-id**'),
        theme: this.getAttribute('**theme**'),
        licenses: this.getAttribute('licenses'),
    };

    console.log('Received parameters:', meta);
}

Hosting and CORS Setup

If you host the widget externally:

• Ensure CORS is enabled for https://app.copyl.com
• Use static hosting (e.g., GitHub Pages, S3, Vercel, Cloudflare, Azure)

See Also

Accessing user context in a Widget / Web Component

Copyl Styling Guide for Web Components

Examples

These files and rule shows a working example of one widget/web component raising an event that another widget get a notification of.

devices.js.example

lorum.js.example

Page Script (Rules)

[{
  "trigger": "DeviceSelected",
  "targetWidgetId": "32bf45ec-b58e-4322-8051-69d86b2c7073",
  "action": "selectDevice",
  "args": ["*"]
}]

Just paste and change the targetWidgetId to your new Id and add the rule to the Page Properties Script.

Deployment Checklist

Questions?

Contact Copyl Developer Support for:

• Theme tokens
• Widget registry access
• Hosting assistance
• Feedback or contributions to the widget ecosystem