Inlined React
Verifying individuals with the Inlined React Flow can be easily achieved with a short code snippet. You'll only need your template ID which can be found in the Integration Section of your Dashboard.
Looking for v3?
We will stop making updates to
persona@3
on December 31, 2022. You will still be able to create inquiries, but no new features or fixes will be available. Please move topersona@4
for access to the latest product improvements- please see migration to v4 section or contact [email protected].
Inlining the flow
Persona can be integrated with the following code snippet. Remember to replace templateId
with your organization's template ID.
import Persona from 'persona';
const InlineInquiry = () => {
return (
<Persona.Inquiry
templateId='<your template ID starting with itmpl_>'
environmentId='<your environment ID starting with env_>'
onLoad={() => { console.log('Loaded inline'); }}
onComplete={({ inquiryId, status, fields }) => {
// Inquiry completed. Optionally tell your server about it.
console.log(`Sending finished inquiry ${inquiryId} to backend`);
}}
/>
);
};
When using the persona
NPM package, you must also ensure its peer dependencies are installed.
# npm
npm install persona react styled-components
# yarn
yarn add persona react styled-components
To permit the Persona iframe to render on your domain, see Security > Embedding the Persona iframe.
Styling
The inlined React component renders an iframe
containing the Persona flow. For more granular or dynamic styling, the iframe
can be targeted via CSS. We recommend targeting a selector provided by your app such as .your-classname > iframe
instead of relying on Persona class names to avoid unexpected breakage.
We recommend using a minimum height of 650px
and a minimum width of 400px
to ensure contents are properly displayed without excessive horizontal wrapping or scrolling.
Handling loading state
The Persona iframe starts loading when the Persona component is rendered. Thus, there will be a delay between when the component is rendered and when the Inquiry flow content is displayed. We recommend using the onReady
client callback to detect when loading is completed, and handling any loading UI outside of Persona.
Alternatively, if your use case allows it, you can pre-render the Persona component and visually hide it with CSS until it needs to be used.
Please reference this sample implementation for an example of how to seamlessly swap between your app's loading UI and the Persona component.
Updated 13 days ago