Rail Signature | Documentación Técnica

Integration HTML / JS

Uso básico para landings o sitios estáticos.

<!-- 1. Cargar el script antes del final del body -->
<script src="path/to/preview.js"></script>

<!-- 2. Inicializar con tus variables -->
<script>
  window.onload = () => {
    initRailSignature({
      theme: 'light',
      railColor: '#00bf63'
    });
  };
</script>
                

Integration React / Next.js

Componente optimizado para SPAs.

import { useEffect } from 'react';

const RailSignature = () => {
  useEffect(() => {
    if (window.initRailSignature) {
      window.initRailSignature({
        railColor: '#00bf63',
        theme: 'dark'
      });
    }
  }, []);

  return null; // Se inyecta al DOM
};
                

Integration Laravel / Blade

Integración en layouts dinámicos.

{{-- En tu layout.blade.php --}}
@push('scripts')
  <script src="{{ asset('js/preview.js') }}"></script>
  <script>
    initRailSignature({
      theme: '{{ $userTheme ?? "light" }}',
      railColor: '#00bf63'
    });
  </script>
@endpush
                

Propiedad	Tipo	Descripción
`theme`	String	Estilo visual: `'light'` o `'dark'`.
`railColor`	Hex	Color principal de la marca y bordes animados.
`typingSpeed`	Number	Velocidad de escritura en ms (def: 38).
`position`	String	Ubicación: `'bottom-right'` o `'bottom-left'`.

Integration HTML / JS

Integration React / Next.js

Integration Laravel / Blade

Configuración de Variables