HiContact Web Component

hi-contact is a customizable web component. It allows users to display a contact form on their website, with the option to send emails or OTPs (One-Time Passwords). The component supports both dark and light themes and can be styled with rounded corners.

Features

• Username Prop: Set the username to personalize the form.
• Button or Form Display: Optionally display the contact form as a button that opens the form on click.
• Theming: Choose between dark or light themes.
• Rounded Corners: Optionally apply rounded corners to the form.
• OTP Mode: Enable or disable OTP functionality.

Installation

You can install the hi-contact component via npm:

npm install hi-contact # yarn add hi-contact 

Or directly import the script in your HTML:

<script type="module" crossorigin src="https://unpkg.com/hi-contact@latest/dist/hiContact.js"></script>

Example

Here’s an example of how to use the component with different settings:

<hi-contact
  username="JaneDoe"
  asButton
  theme="light"
  corners="rounded"
  otp>
  <div>Contact me</div>
</hi-contact>

Attributes

• username: string - The username to be displayed in the form.
• asButton: boolean - Displays the form with a slot with hook (button).
• otp: boolean - Enables OTP mode when set.
• theme: 'dark' | 'light' - Sets the theme of the form. Default is 'dark'.
• corners: 'rounded' | '' - Adds rounded corners to the form.

Usage

Basic Usage

To use the hi-contact component, include it in your HTML as follows:

<hi-contact username="JohnDoe"></hi-contact>

Button Mode

If you prefer to display a button that triggers the contact form, set the asButton attribute to true:

<hi-contact username="JohnDoe" asButton>
  <div>Contact me</div>
</hi-contact>

OTP Mode

Enable OTP functionality by setting the otp attribute to true:

<hi-contact username="JohnDoe" otp></hi-contact>

Theming

The component supports dark and light themes. The default theme is dark. To switch to the light theme, use the theme attribute:

<hi-contact username="JohnDoe" theme="light"></hi-contact>

Rounded Corners

To apply rounded corners to the form, use the corners attribute:

<hi-contact username="JohnDoe" corners="rounded"></hi-contact>

Styling

You can further customize the appearance of the component using CSS. For example:

hi-contact {
  --hi-bg-color:  rgba(86, 57, 216, 0.603); 
  --hi-text-color:  rgb(187, 43, 43);
  --hi-border-color:  rgb(243, 244, 246, 0.1);
  --hi-button-color:  rgb(2, 17, 12);
  --hi-button-hover-color:  rgb(24, 181, 129);
  --hi-button-text-color:  rgb(225, 28, 28);
  --hi-button-text-hover:  rgb(76, 9, 9);
  --hi-placeholder-text:  rgb(184, 32, 32);
  --hi-placeholder-color:  rgb(6, 5, 5);
  }