Skip to content
BellJs

Modifying HTML

BellJs is now completely customizable with that in mind you can recreate most alerts on the web.

How is this possible?

Two new properties were added for the third parameter of Bell, these properties customize this alert to the maximum, if you are wondering which properties I am talking about, I am referring to customIcon, customClass, customStyles and the most powerful customHTML, using them you can generate incredible and adaptable alerts.

Changing styles with customStyles

You can change the styles of your Bell alerts using this property, any existing CSS style property can be used, although compatibility will depend on the browser. Let’s see an example:

new Bell({
  title: "Bell Title",
  description: "Bell Description"
  },"info",{
    customStyles:{
      description: {
        color: "green",
        "font-size": "1rem"
      },
      icon: {
        color: "red"
      }
    }
  }
).launch()

You can modify any of the CSS properties that are present in the elements in the alert you have created from the title to the icons.

Changing the default icons

BellJs has 5 default icons, these being info,warning,success,error,promise each of them for a respective action and style. You may want to improve the customization by changing the icons. To change them you just have to modify them from the customIcon property, let’s see an example:

const icon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><circle fill="none" stroke="#2486ca" stroke-width=".5" cx="100" cy="100" r="0"><animate attributeName="r" calcMode="spline" dur="2" values="1;80" keyTimes="0;1" keySplines="0 .2 .5 1" repeatCount="indefinite"/><animate attributeName="stroke-width" calcMode="spline" dur="2" values="0;25" keyTimes="0;1" keySplines="0 .2 .5 1" repeatCount="indefinite"/><animate attributeName="stroke-opacity" calcMode="spline" dur="2" values="1;0" keyTimes="0;1" keySplines="0 .2 .5 1" repeatCount="indefinite"/></circle></svg>`


new Bell({
  title: "Changing info icon",
  },"info",{
  customIcon: icon
}).launch()

With this we will change the icons only or globally for all alerts.

Alert with events using customHTML

The greatest customization of Bell is achieved by using the customHTML property, since with this we completely clean the alert and design a new one to our liking, of course with all the benefits already proposed above. Let’s create an alert like Vercel’s together:

The first thing we need to do is create the new HTML and CSS:

function removeAlert(){
bell.dismiss()
}
const newHTML = `
<div class="c_alert">
<h2>Do you want to complete the action?</h2>
<p>The user will be removed from the registry</p>
<div>
<button>Cancel</button>
<button id="button">Delete</button>
</div>
</div>`

With this we already have the structure of our Vercel alert, the next thing to do is to change the alert for this new HTML, this is done in the following way:

const bell = new Bell({
title:"Placeholder"
},
"none",{
typeAnimation: "bound-2",
customHTML: newHTML,
removeOn: "button",
screenTime: 10000
})
document.getElementById("button").addEventListener("click",removeAlert)
bell.launch()

You can see that the alert has changed completely, now it is up to you what you want to design.