Kirki offers extensive customization options, but there are times when you may want to go beyond the built-in elements. 

The Code element lets you add custom HTML, CSS, and JavaScript directly to your page or embed third-party content such as Bootstrap components, social buttons, maps, and more.

Add the Code Element

1. Open the Insert panel from the Left Sidebar.

2. Go to Elements → Base Elements.

3. Scroll down to the Advanced section and click or drag the Code element onto the canvas.

Add Custom Code

Once the element is on the canvas, you can add your custom code:

1. Select the Code element on the canvas.

2. Click the Code ( < / > ) icon in the Custom Code section under the Design tab on the Right Panel.

3. The Custom Code Editor has two tabs:
   • Code – Paste your HTML, CSS, and JS code directly into the editor.
   • Web URL Tab – Instead of pasting the full code, paste the URL where the code is hosted. Make sure the code is publicly accessible on the web.

4. Finally, click Migrate to convert your custom code into fully editable Kirki elements, or Embed to paste the code as it is as a code block.

📝 Note: Avoid including < html >, < head >, or < body > tags in your custom code as they may interfere with the page’s native code and cause issues. Also, avoid using < script > tags when using Migrate instead of Embed.

Migrate from Webflow

You can migrate from Webflow to Kirki using the Code element.

But make sure when you’re bringing over code from Webflow, click Migrate instead of Embed in the Code tab. 

Kirki will convert your Webflow code into fully editable Kirki elements — turning it into a div with all child elements translated and ready to customize.