Customize the blocking dialog

Using the Sabil JavaScript SDK, you can pass an appearance_config object to the attach function. The appearance config object supports two options.

font_family: String: any valid CSS font-family string.
dark: Boolean: if true, the dialog will display in dark mode.

It is recommended that you pass the appearance config with a font_family that matches your website.

Here's an example from Sabil's own website:

try {  await Sabil.attach({    show_blocking_dialog: true,    client_id: `client_id`,    user: `user_id`,    appearance_config: {      font_family: '"Inter", "Roboto", sans-serif',      dark: false,    },    limit_config: {      overall_limit: 2,    },    on_current_device_logout() {      //TODO: [Important] implement your logout logic    },  });} catch (error) {  console.error(error);}

Here's what the above configuration results in: Blocking dialog example