> ## Documentation Index
> Fetch the complete documentation index at: https://docs.compago.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Inicio del manual
> Qué vas a encontrar en el manual de Compago, en qué orden conviene leerlo y cómo pedirnos ayuda.
export const SupportBox = () => ;
export const GuideImage = ({src, preview, alt, width, height, caption, variant = 'screen'}) => {
const [open, setOpen] = useState(false);
const [view, setView] = useState(null);
const opener = useRef(null);
const dialog = useRef(null);
const viewport = useRef(null);
const closeButton = useRef(null);
const fitScale = useRef(1);
const drag = useRef(null);
const long = height / width > 1.6;
const icon = (d, size = 18) => ;
const ZOOM_IN = 'M11 3a8 8 0 1 0 0 16 8 8 0 0 0 0-16zM21 21l-4.35-4.35M11 8v6M8 11h6';
const ZOOM_OUT = 'M11 3a8 8 0 1 0 0 16 8 8 0 0 0 0-16zM21 21l-4.35-4.35M8 11h6';
const FIT = 'M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2';
const DOWNLOAD = 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3';
const CLOSE = 'M18 6 6 18M6 6l12 12';
const clampView = next => {
const el = viewport.current;
if (!el) return next;
const w = width * next.scale;
const h = height * next.scale;
const keep = 96;
const x = w <= el.clientWidth ? (el.clientWidth - w) / 2 : Math.min(keep, Math.max(el.clientWidth - w - keep, next.x));
const y = h <= el.clientHeight ? (el.clientHeight - h) / 2 : Math.min(keep, Math.max(el.clientHeight - h - keep, next.y));
return {
scale: next.scale,
x,
y
};
};
const fit = () => {
const el = viewport.current;
if (!el) return;
const scale = long ? Math.min(1, el.clientWidth * 0.94 / width) : Math.min(1, el.clientWidth * 0.94 / width, el.clientHeight * 0.88 / height);
fitScale.current = scale;
setView(clampView({
scale,
x: (el.clientWidth - width * scale) / 2,
y: long ? 72 : (el.clientHeight - height * scale) / 2
}));
};
const zoomAt = (factor, cx, cy) => {
setView(current => {
const el = viewport.current;
if (!current || !el) return current;
const px = cx ?? el.clientWidth / 2;
const py = cy ?? el.clientHeight / 2;
const scale = Math.min(Math.max(fitScale.current * 0.5, current.scale * factor), Math.max(1.5, fitScale.current * 6));
const ratio = scale / current.scale;
return clampView({
scale,
x: px - (px - current.x) * ratio,
y: py - (py - current.y) * ratio
});
});
};
const panBy = (dx, dy) => setView(current => current && clampView({
...current,
x: current.x + dx,
y: current.y + dy
}));
const close = () => {
setOpen(false);
setView(null);
opener.current?.focus();
};
const show = event => {
opener.current = event.currentTarget;
setOpen(true);
};
const actions = useRef({});
actions.current = {
fit,
zoomAt,
panBy,
close
};
useEffect(() => {
const modal = dialog.current;
if (!open || !modal) return undefined;
if (!modal.open) modal.showModal();
const el = viewport.current;
actions.current.fit();
closeButton.current?.focus();
const onResize = () => actions.current.fit();
const onKey = event => {
const {zoomAt: zoom, panBy: pan} = actions.current;
if (event.key === '+' || event.key === '=') zoom(1.25); else if (event.key === '-' || event.key === '_') zoom(0.8); else if (event.key === '0') actions.current.fit(); else if (event.key === 'ArrowUp') pan(0, 120); else if (event.key === 'ArrowDown') pan(0, -120); else if (event.key === 'ArrowLeft') pan(120, 0); else if (event.key === 'ArrowRight') pan(-120, 0); else return;
event.preventDefault();
};
const onWheel = event => {
event.preventDefault();
const rect = el.getBoundingClientRect();
if (event.ctrlKey || event.metaKey) actions.current.zoomAt(Math.exp(-event.deltaY * 0.0022), event.clientX - rect.left, event.clientY - rect.top); else actions.current.panBy(-event.deltaX, -event.deltaY);
};
const root = document.documentElement;
const overflow = root.style.overflow;
root.style.overflow = 'hidden';
window.addEventListener('resize', onResize);
document.addEventListener('keydown', onKey);
el?.addEventListener('wheel', onWheel, {
passive: false
});
return () => {
root.style.overflow = overflow;
window.removeEventListener('resize', onResize);
document.removeEventListener('keydown', onKey);
el?.removeEventListener('wheel', onWheel);
if (modal.open) modal.close();
};
}, [open]);
const onPointerDown = event => {
if (event.button !== 0) return;
drag.current = {
x: event.clientX,
y: event.clientY,
travel: 0
};
event.currentTarget.setPointerCapture(event.pointerId);
};
const onPointerMove = event => {
const start = drag.current;
if (!start) return;
const dx = event.clientX - start.x;
const dy = event.clientY - start.y;
start.travel += Math.abs(dx) + Math.abs(dy);
start.x = event.clientX;
start.y = event.clientY;
panBy(dx, dy);
};
const onPointerUp = event => {
const start = drag.current;
drag.current = null;
if (!start || start.travel > 6 || !view) return;
const rect = viewport.current.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
const inside = x >= view.x && x <= view.x + width * view.scale && y >= view.y && y <= view.y + height * view.scale;
if (!inside) close();
};
const onDoubleClick = event => {
const rect = viewport.current.getBoundingClientRect();
if (view && view.scale > fitScale.current * 1.4) fit(); else zoomAt(2.2, event.clientX - rect.left, event.clientY - rect.top);
};
const percent = view ? Math.round(view.scale / fitScale.current * 100) : 100;
const viewer = open && ;
if (variant === 'guide') {
return
{caption && {caption}}
{viewer}
;
}
return
{caption && {caption}}
{viewer}
;
};
Este manual te enseña a usar tu panel de Compago, una función a la vez. Son más de 80 guías cortas, hechas para seguirlas desde tu computadora con tu panel abierto en otra pestaña. Aquí te contamos qué trae cada guía, por dónde empezar y cómo encontrar lo que buscas.
## Qué trae cada guía
Todas las guías tienen la misma forma, para que siempre sepas dónde está cada cosa.
Abre cada guía y casi siempre dura menos de un minuto. Si solo tienes un momento, con el video basta.
Una imagen de la pantalla por paso, con lo que debes tocar marcado en naranja. Haz clic en ella para ampliarla.
Las dudas que más nos llegan y qué hacer cuando la pantalla te muestra un aviso.
Todos los pasos en una sola imagen, para descargarla o mandársela a tu equipo.
Así se ve un paso. El botón que debes tocar va dentro del marco naranja, junto a la etiqueta **Haz clic aquí**:
## Por dónde empezar
Si acabas de llegar a Compago, sigue este orden. Cada paso es una guía, y al terminarlas ya cobraste, viste tu pago y sabes cuándo llega tu dinero.
Regístrate con tu correo o con Google. Ve a [Crea tu cuenta](/manual/primeros-pasos/crear-tu-cuenta).
Sube tu constancia de situación fiscal, registra la cuenta donde quieres recibir tu dinero y deja tu panel listo para cobrar. Ve a [Da de alta tu comercio](/manual/primeros-pasos/dar-de-alta-tu-comercio).
El menú, las listas y los filtros funcionan igual en todas las pantallas. Ve a [Conoce tu panel](/manual/primeros-pasos/conoce-tu-panel).
Cobra un monto fijo con un link, sin estar frente a tu cliente. Ve a [Crear un link de pago](/manual/links-de-pago/crear-un-link-de-pago).
Copia su dirección y mándala por WhatsApp, correo o redes. Ve a [Compartir tu link](/manual/links-de-pago/compartir-tu-link).
Encuentra cualquier pago y revisa su estado. Ve a [Ver tus pagos](/manual/pagos/ver-tus-pagos).
Consulta cuánto y cuándo te depositamos. Ve a [Ver tus liquidaciones](/manual/liquidaciones/ver-tus-liquidaciones).
Dale acceso a tu panel a otras personas, con el rol que elijas. Ve a [Invitar a tu equipo](/manual/organizacion/invitar-a-tu-equipo).
¿Te invitaron al panel de un comercio que ya cobra con Compago? Empieza por [Acepta una invitación](/manual/primeros-pasos/aceptar-una-invitacion) y sigue con [Conoce tu panel](/manual/primeros-pasos/conoce-tu-panel).
## Lo que sigue, según tu negocio
Cuando ya cobras, estas son las funciones que más usan los comercios.
Decide en qué plazos puede pagar tu cliente cuando abre tu link.
Cobra de forma automática cada semana, cada mes o cada año.
Arma tu catálogo para cobrar productos en tus links de pago.
Pide hoy el depósito de tu saldo pendiente.
Devuelve el total de un pago del mismo día a la tarjeta de tu cliente.
Pregunta por tus ventas, pagos y depósitos con tus propias palabras.
## Cómo moverte por el manual
* **El menú de la izquierda** tiene todas las guías, en el mismo orden que el menú de tu panel: **Pagos**, **Links de pago**, **Suscripciones**, **Liquidaciones** y las demás secciones.
* **Para leerlo en orden**, usa el botón **Siguiente** al final de cada guía. Esta es la primera.
* **A la derecha** de cada guía está su índice, para saltar a un paso o a las preguntas frecuentes.
* **El logo de Compago**, arriba a la izquierda, te lleva a la portada del manual, con el buscador y todos los temas.
## Cómo buscar una guía
El buscador encuentra las guías por sus palabras. Escribe el tema con una o dos palabras, en lugar de una pregunta completa.
| Escribe esto | En lugar de esto |
| - | - |
| `crear link de pago` | ¿Cómo le cobro a un cliente que está en otra ciudad? |
| `recuperar contraseña` | No puedo entrar a mi cuenta, ¿qué hago? |
| `cancelar un pago` | ¿Cómo le regreso su dinero a un cliente? |
| `cuenta bancaria` | ¿Dónde cambio la cuenta en la que me depositan? |
Abre el buscador desde cualquier página con el campo de arriba, o con ⌘K (Ctrl+K en Windows).
## ¿Necesitas ayuda?
Si no encuentras lo que buscas o algo no sale como en la guía, escríbenos por WhatsApp o por correo. Dónde encontrar estos datos desde la app está en [Contactar a soporte](/manual/ayuda/contactar-a-soporte).
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.