Styling the embed unread indicator | LaunchNotes Help Center

Styling the LaunchNotes Embed Unread Indicator

The LaunchNotes embed provides a highly customizable unread indicator that you can style to match your brand’s design. Below are details on how to style the unread indicator using CSS variables, animations, and classes.

Add CSS targeting the unread indicator to the parent page, where the embed is installed.

CSS Variables

These variables allow you to customize the size and animation of the unread indicator:

• --ln-embed-unread-font-size: Sets the font size of the unread count (default: 10px).

• --ln-embed-unread-size: Defines the overall size of the unread indicator (default: 16px).

• --ln-embed-unread-pulse-scale: Adjusts the scale of the pulse animation (default: 0.5).

Example:

:root {
  --ln-embed-unread-font-size: 12px;
  --ln-embed-unread-size: 20px;
  --ln-embed-unread-pulse-scale: 0.8;
}

Keyframes for Animation

The unread indicator animation uses the @keyframes ln-embed-unread-animation animation. You can redefine this animation to suit your design needs.

Example:

@keyframes ln-embed-unread-animation {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

Classes for Customization

.ln-embed-unread

This class sets the alignment, display, and position of the unread indicator. Use it for general layout adjustments.

Example:

.ln-embed-unread {
  position: absolute;
  top: 0;
  right: 0;
}

.ln-embed-unread-indicator

This class defines the colors, font settings, and text alignment for the unread count. Customize it for visual styles like colors and typography.

Example:

.ln-embed-unread-indicator {
  background-color: #ff5722;
  color: #fff;
  font-weight: bold;
  text-align: center;
  border-radius: 50%;
}

Example Styling

Here’s a complete example of custom styles:

:root {
  --ln-embed-unread-font-size: 14px;
  --ln-embed-unread-size: 18px;
  --ln-embed-unread-pulse-scale: 0.7;
}

@keyframes ln-embed-unread-animation {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.1);
    opacity: 0;
  }
}

.ln-embed-unread {
  position: absolute;
  top: -10px;
  right: -10px;
}

.ln-embed-unread-indicator {
  background-color: #4caf50;
  color: white;
  font-size: var(--ln-embed-unread-font-size);
  width: var(--ln-embed-unread-size);
  height: var(--ln-embed-unread-size);
  line-height: var(--ln-embed-unread-size);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: ln-embed-unread-animation 1s infinite;
}

Apply these styles in your CSS to ensure the unread indicator aligns with your brand and design preferences.