Web Floating Dialog

A dialog plugin to alert your website users about any important information.

Motivation

Inspired from paper dialog seen on YouTube during COVID-19 outbreak.

How to integrate?

Using NPM

• Install package.

  npm i @robomx/web-dialog or yarn add @robomx/web-dialog

• Add import.

  import '@robomx/web-dialog/dist/webdialog.min';

Using JS script

• Add following line to bottom of your body tag.

  <script type="text/javascript" src="https://unpkg.com/@robomx/web-dialog@latest/dist/webdialog.min.js"></script>

Last add the tag:

robomx-webdialog tag before script file. Example:

    <robomx-webdialog
        title="Dialog title"
        description="Dialog description"
        imgSrc="sample.png"
        imgWidth="300px"
        imgHeight="200px"
        position="bottom-left"
        link="example.com"
        actionText="Learn More"
        actionTarget="_blank"
        dismissText="Later"
    ></robomx-webdialog>

Output

Variables

Attribute	Default	Accepts	Note
title	Dialog title	string content	Specify title of the dialog
description	Dialog description	string content	Give brief information about the dialog.
actionText	Learn More	string content	`Action button text
imgSrc	null	Image path	Specify image source url or relative path.
imgWidth	300px	px, em, %	Specify width of the image.
imgHeight	200px	px, em, %	Specify height of the image.
position	bottom-left	top-left, top-right, bottom-left, bottom-right, center	Specify position of the dialog box.
darkMode	false	boolean	Dark mode setup.
bgColor	#fff	Hex Code, RGB	Backgroung color of dialog box.
txtColor	#373737	Hex Code, RGB	Text color of dialog content.
btnColor	#6c6b6b	Hex Code, RGB	Button color of 'Later'.
link	http://example.com	URL	URL for action button.
actionTarget	_blank	_blank, _self, _parent, _top	Target tab of action button.
dismissText	Later	string word	Dismiss button text.