Integrate AI chatbots with Dittofi

Open the Page Builder: Navigate to the page builder and select the Custom tab.

Add a New Component: Click on New Component to open a panel for entering your custom HTML, CSS, and JavaScript.

Name Your Component: Assign a name to your component (e.g., "Alert Button") and categorize it (e.g., "Basic"). No library selection is needed at this stage.

Write Your HTML, CSS, and JavaScript:

• HTML: Input your custom HTML structure. For example:

  <div data-id="my-custom-id" class="red">
      <h1>Test</h1>
  </div>
  

• CSS: Add your custom CSS styles. For example:

  .red {
      color: red;
  }
  

• JavaScript: Implement functionality with JavaScript. For example:

  var item = document.querySelector('[data-id="my-custom-id"]');
  item.addEventListener("click", (e) => alert("Alert"));
  

Set Component Properties: Define configurable properties for your component that will appear in the properties tab.

Add Dependencies: If needed, include references to external stylesheets (e.g., Bootstrap CDN).

Save and Test: Save your component and drag it onto the page to test its functionality. You should see the styled text and the alert popup when clicked.