Sticky CTA Bar

Installation

Variants

Files installed (2)

• src/app/components/blocks/sticky-cta-bar/sticky-cta-bar.component.ts4 kB

  Copy

  // Scroll-triggered bottom CTA bar that reveals past a threshold, carrying an offer
  // line, inline social proof, primary + ghost actions, and a dismiss control that
  // stays dismissed for the session.
  // Deprecated alias of the sticky conversion trio (use ui-sticky-cta-bar from `sticky-cta`).
  // Port of the Vue/React block 1:1.
  import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit, signal } from '@angular/core'
  import { Clock, LucideAngularModule, X } from 'lucide-angular'
  import { cn } from '@/lib/utils'
  import { UiBadgeComponent } from '@/ui/badge/badge.component'
  import { UiButtonComponent } from '@/ui/button/button.component'
  import { UiSeparatorComponent } from '@/ui/separator/separator.component'
  
  @Component({
    changeDetection: ChangeDetectionStrategy.Eager,
    selector: 'ui-sticky-cta-bar, [ui-sticky-cta-bar]',
    standalone: true,
    // The block renders its own fixed root <div>: keep this wrapper out of the layout.
    host: { '[attr.class]': '"contents"' },
    imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiSeparatorComponent],
    template: `
      <div
        data-slot="sticky-cta-bar"
        [class]="rootClass"
        role="region"
        aria-label="Trial offer"
        [attr.aria-hidden]="!visible()"
      >
        <div
          class="border-border bg-card/95 mx-auto flex max-w-4xl flex-wrap items-center gap-x-5 gap-y-3 rounded-xl border p-3 pl-4 shadow-lg backdrop-blur"
        >
          <span ui-badge variant="secondary" class="gap-1.5">
            <lucide-icon [img]="Clock" class="size-3" />
            Free for 14 days
          </span>
  
          <p class="min-w-0 grow text-sm">
            <span class="font-medium">Start on the full plan.</span>
            <span class="text-muted-foreground"> No card, no sales call, cancel from the dashboard.</span>
          </p>
  
          <div class="flex items-center gap-2">
            <button ui-button size="sm">Start free trial</button>
            <button ui-button size="sm" variant="ghost" class="hidden sm:inline-flex">Talk to us</button>
            <div ui-separator orientation="vertical" class="hidden h-6 sm:block"></div>
            <button ui-button size="icon" variant="ghost" aria-label="Dismiss this offer" (click)="dismiss()">
              <lucide-icon [img]="X" class="size-4" />
            </button>
          </div>
        </div>
      </div>
    `,
  })
  export class UiStickyCtaBarComponent implements OnInit, OnDestroy {
    protected readonly Clock = Clock
    protected readonly X = X
  
    /** Scroll distance in pixels before the bar reveals. */
    @Input() threshold = 480
    /** sessionStorage key holding the dismissal, so it stays closed for the session. */
    @Input() storageKey = 'uipkge:sticky-cta-dismissed'
    @Input('class') className?: string
  
    // Starts hidden so server and first client render agree — the scroll handler
    // is the only thing that reveals it.
    readonly visible = signal(false)
    private dismissed = false
    private onScrollBound: (() => void) | null = null
  
    ngOnInit(): void {
      if (typeof window === 'undefined') return
      try {
        this.dismissed = window.sessionStorage.getItem(this.storageKey) === '1'
      } catch {
        this.dismissed = false
      }
      this.onScrollBound = () => this.onScroll()
      this.onScroll()
      window.addEventListener('scroll', this.onScrollBound, { passive: true })
    }
  
    ngOnDestroy(): void {
      if (typeof window !== 'undefined' && this.onScrollBound) {
        window.removeEventListener('scroll', this.onScrollBound)
      }
    }
  
    get rootClass(): string {
      return cn(
        'fixed inset-x-0 bottom-0 z-50 px-4 pb-4 transition duration-200',
        this.visible() ? 'translate-y-0 opacity-100' : 'pointer-events-none invisible translate-y-full opacity-0',
        this.className,
      )
    }
  
    onScroll(): void {
      this.visible.set(!this.dismissed && window.scrollY > this.threshold)
    }
  
    dismiss(): void {
      this.dismissed = true
      this.visible.set(false)
      try {
        window.sessionStorage.setItem(this.storageKey, '1')
      } catch {
        // Private browsing or blocked storage: dismissing still holds for this page view.
      }
    }
  }
  

• src/app/components/blocks/sticky-cta-bar/index.ts0.1 kB

  Copy

Raw manifest:https://uipkge.dev/r/angular/sticky-cta-bar.json