Signup Forms

Signup Forms en simple

Piensa en Signup Forms como el botón de pago por suscripciones de tu negocio. Tus clientes pueden elegir a que planes se suscriben y configurar sus preferencias de pago.

Aquí te explicaremos como lanzar Signup Forms en minutos, y habilitar automáticamente a tus clientes y suscriptores para acceder tu aplicación o servicios.

Instalación no-code

Esta instalación te permite habilitar y personalizar un Signup Forms en una página alojada. Recomendada para empresas de servicios o negocios no basados en SaaS.

Preferencias generales

Ve al menú general y haz clic en Aplicaciones.
Haz clic en Signup Forms.
Ahora crea un Nuevo Signup Form, o ingresa a uno ya creado que deseas editar.
Agrega un Nombre a tu formulario para identificarlo internamente.
Puedes activar/desactivar la opción para que tus clientes puedan comprar múltiples planes de precio, o bien
mostrarles un único plan.
Puedes activar/desactivar la opción tarjeta de crédito o débito requerida u obligatoria, o permitir la suscripción de
clientes con cobranza tradicional.

Si aún no haz conectado un Proveedor de pagos aprende cómo hacerlo aquí.

Muestra tus productos y planes

Haz clic en Agregar plan y selecciona un producto de tu lista.
Ahora selecciona un plan de tu producto.
Puedes activar/desactivar la opción para que tus clientes puedan elegir libremente la cantidad de planes que
quieren comprar.
Puedes activar/desactivar la opción para que tus clientes puedan comprar el plan desde una cantidad mínima.
5 .Agrega un Nombre que es el que verá tu cliente.
Agrega una Descripción que es la que verá tu cliente.

Si aún no haz creado tu primer producto y plan de precios, aprende más en Productos y Planes.

Agrega complementos

Haz clic en Agregar complemento y selecciona uno de tu lista.
Puedes activar/desactivar la opción para que tus clientes puedan elegir libremente la cantidad de complementos
que quieren agregar.
Puedes activar/desactivar la opción para que tus clientes puedan agregar complementos desde una cantidad
mínima.
Agrega un Nombre al complemento, que es el que verá tu cliente.
Agrega una Descripción al complemento, que es la que verá tu cliente.

Si no haz creado un Complemento aprende más aquí.

Cupones de descuento

📘
Proximamente disponible.

Habilita invoices o facturas electrónicas

Selecciona el tipo de documento de cobro que tu cliente podrá seleccionar cuando ingrese sus datos de facturación y haz clic en Agregar. Este puede ser un invoice o una factura electrónica.
Selecciona los países donde tus planes estarán disponibles.
Agrega etiquetas personalizadas al formulario de Nombre, Estado y ID Fiscal. Estos datos son necesarios cuando un negocio cobra con factura electrónica.

Enlaces y webhook

Agrega una url opcional para notificar mediante Webhook cuando haya un registro suscripción exitoso.
Agrega una url opcional de redireccionamiento por defecto una vez que el cliente haya finalizado la compra de un plan.

Branding

Los elementos de diseño son muy importantes para que tus clientes disfruten de una buena experiencia. Aprende a configurar el branding de tu cuenta aquí.

Instalación y poner en vivo

Ahora solo queda Crear y poner en vivo o Guardar.
Ve a la parte superior de tu formulario y activa/desactiva el Modo de prueba.
Haz clic en el botón Instalación y luego en Página Alojada.
Dale tus últimos retoques al Layout y los encabezados de la página y listo.
Haz clic en Guardar y ve a la parte superior presionando Ir a la página alojada

Instalación low-code

Esta instalación te permite habilitar y personalizar un Signup Forms en la aplicación o sitio web que quieras.

Recomendada para negocios basados en SaaS o que necesitan un mayor nivel de personalización y flexibilidad en sus workflows de cobro.

Incrustar el fragmento en tu sitio web o aplicación

Después de haber creado tu Signup Form copia el fragmento de código indicado en la sección Instalación -> Fragmento de JavaScript para Signup Forms y pégalo antes de la etiqueta </body> en todas las páginas en las que deseas que Signup Forms aparezca para tu usuario.

Si utilizas algún framework como React o VueJS puedes inyectar el script de la forma convencional que utiliza cada framework.

Ejemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Demo Piriod Signup Forms</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
	<div id="piriod-widget"></div>
	<script>
		window.piriodSettings = {
			service: "signupForms",
			publishableKey: "YOUR SIGNUP FORM PUBLISHABLE KEY"
		};
		(function () { var s=document.createElement("script"); s.src="https://js.piriod.com/embed/piriod-embed.umd.min.js"; s.async=true; s.type="text/javascript"; var x=document.getElementsByTagName("script")[0]; x.parentNode.insertBefore(s, x); })();
	</script>
</body>
</html>

Opciones personalizadas

Utiliza las opciones disponibles para personalizar el diseño o la información del formulario. Utiliza el atributo piriodSettings.options para definir los valores

Ejemplo

window.piriodSettings = {
  	service: "signupForms",
  	publishableKey: "YOUR SIGNUP FORM PUBLISHABLE KEY",
  	options: {
  		backgroundColor: "white"
  	}
};

options.backgroundColor

Aplica el color especificado al fondo del formulario; puede ser el nombre del color estándar (por ejemplo, red o blue) o el color css (#033 o rgba(255, 0, 0, 0.5)).

Valor por defecto transparent

options.selectedPlans

Inicializa el formulario con los planes especificados ya seleccionados.

Valor por defecto {}

window.piriodSettings = {
  service: "signupForms",
  publishableKey: "YOUR SIGNUP FORM PUBLISHABLE KEY",
  options: {
    selectedPlans: [
      {
        custom_id: "MY_CUSTOM_ID",
        quantity: 3
      }
    ]
  }
};

En la configuración del formulario es necesario definir el campo ID personalizado dado a que es este identificador el que se debe asignar en el atributo options.selectedPlans[].custom_id

Si también deseas pre-establecer la cantidad del plan seleccionado puedes utilizar el atributo options.selectedPlans[].quantity. La cantidad será considerada siempre y cuando sea igual o mayor al campo Cantidad mínima en la configuración del formulario.

Información de contexto

La información de contexto permite auto-completar los campos del formulario para los casos en los cuales ya tienes información. por ejemplo cuando ya tienes el email o la dirección de facturación del usuario.

Utiliza el atributo piriodSettings.context para definir información de contexto.

context.customer

Auto-completar la información de facturación de tu usuario (o cliente). Los campos disponibles son address, country, email, name y tax_id.

window.piriodSettings = {
  service: "signupForms",
  publishableKey: "YOUR SIGNUP FORM PUBLISHABLE KEY",
  context: {
    customer: {
      country: "US",
      email: "[email protected]",
      tax_id: "11111111-1"
    }
  }
};

context.metadata

Añadir metadatos para la suscripción generada a partir del formulario. Es útil por ej. cuando necesitas registrar en la suscripción información relevante sobre tu usuario (o cliente).

window.piriodSettings = {
  service: "signupForms",
  publishableKey: "YOUR SIGNUP FORM PUBLISHABLE KEY",
  context: {
    metadata: {
      userID: "123456",
      foo: "foo"
    }
  }
};

Eventos de JavaScript

piriod_signup_form_subscription

Emitido cuando el proceso de suscripción o registro es finalizado. Devuelve data con el atributo status que puede tener el valor succeeded o failed

Ejemplo

window.addEventListener('message', function(e) {
  if (e.data.event === 'piriod_signup_form_subscription' && e.origin === 'https://js.piriod.com') {
    if (e.data.status === 'succeeded') {
      console.log('subscription created successfully');
    } else {
      console.log('subscription creation failed');
    }
  }
}