Prototype with ease and speed

Step 1: Configure a UI component

Step 2: Customize your component

Bolik App generates a Web Component. By default you don't provide any attributes to it. The component uses default attributes that you configured in Bolik App.

Customize attributes

Every Web Component lets you to customize itself by defining the attributes.

<bk-newsletter-form title="Join our newsletter"></bk-newsletter-form>

Customize primary color

Bolik provides CSS variables that could configure Web Component's primary color.

bk-newsletter-form {
  /* This is an RGB string */
  --bk-color: 124, 58, 237;
}

Customize styles

Bolik generates Web Components that are inside a Shadow DOM. This means that your default CSS rules do not apply to the components. You need to use ::part pseudo-element.

bk-newsletter-form::part(form) {
  max-width: 300px;
}

Step 3: Self-host integration

Have you reached a point where you want to self-host the integration? With Bolik this step is a natural continuation. Every Web Component lets you customize the URL where it sends the data to. Usually, it is a href attribute.

<bk-newsletter-form href="https://your-backend.localhost/newsletter"></bk-newsletter-form>

Source code

Bolik components are open-source and could be found in this GitHub project.

Do you want to learn more? Get in touch with us.