Skip to main content

CSS Injection

To have multiple layout templates, plugins can use CSS Injection to customize their appearance. Each plugin can upload layouts without the need for custom implementations; buildfire will automate this process, and the plugin will have a new tab called layouts in the CP, which will be loaded on the Widget.


plugin.json changes

Inside the control section in plugin.json add this cssInjection object:


enabledbooleanyesEnable or disable CSS Injection feature.
layoutsarrayyesArray of layouts objects, can't be empty.


namestringyesLayout name. ex: "Layout 1".
imageUrlstringyesRelative path of layout image to be rendered on CP. Must start with the resources folder. ex: "imageUrl": "resources/layouts_img/layout1.png".
cssPathstringyesRelative path of layout css file to be fetched on both CP and Widget. Must start with the widget folder. ex: "cssPath": "widget/layouts/layout1.css".
"control": {
"content": {
"enabled": true
"enabled": true
"enabled": false
"cssInjection": {
"enabled": true,
"layouts": [
"name": "Layout 1",
"imageUrl": "resources/layouts_img/layout1.png",
"cssPath": "widget/layouts/layout1.css"
"name": "Layout 2",
"imageUrl": "resources/layouts_img/layout2.png",
"cssPath": "widget/layouts/layout2.css"
"name": "Layout 3",
"imageUrl": "resources/layouts_img/layout3.png",
"cssPath": "widget/layouts/layout3.css"

If any images or css files are missing, plugin.json contains incorrect paths, or no layouts are found, you will not be able to upload your plugin to the developer portal. It will throw a CSS injection validation failed error.


The first object in the layouts array will be the default active layout.

Enable Loading plugin.json

Add this meta tag in your index.html on the widget:

<meta name="buildfire" content="enablePluginJsonLoad">

If this tag was not attached before buildfire.js, you will not be able to use this feature properly.

Layout Tab Preview


Advanced Mode

As an app owner, you can create your custom layout by creating a copy from one of the pre-defined layouts.


Only custom layouts can be edited and deleted by the app owner, they can't edit or delete any of the pre-defined layouts.