# Button Link
## Implementing the Verification Button
To start the verification flow, you will present the user with a button or link on your website. This element will use the unique magic\_link generated for that user.
This guide covers the full process: retrieving the link from your backend and displaying it on your frontend as a clickable button.
## Overview Steps
1. [Create a user](https://docs.trustswiftly.com/users#create-user) with our API with the information to verify.
2. Save the `magic_link` parameter to use for your button `href` value.
3. *(Optional)* [Regenerate the magic link](https://docs.trustswiftly.com/api/users#get-magic-link) for page refreshes or logins where the link is expired.
4. Display a button with the magic link. Recommended to use `target="_blank"` ([Example Bootstrap Button](https://www.tutorialrepublic.com/twitter-bootstrap-button-generator.php))
5. *(Optional)* Setup redirect URL and messages. You can direct users back to your website upon verification completion to inform them of next onboarding steps.
1. `https://{sub-domain}.trustswiftly.com`**`/settings`**
Example code
```markup
Verify me
```
## Button Assets
{% file src="" %}
PNG Button Images
{% endfile %}
{% file src="" %}
SVG Button Images
{% endfile %}
## Detailed Button Example
#### Step 1: Get the Magic Link from Your Backend
First, your server-side code needs to make an API call to Trust Swiftly to get the user's `magic_link`. You should trigger this when you need to display the button—for example, when rendering the user's profile page.
Here is a PHP example demonstrating how to get the link for a user with the `reference_id` of 'user\_12345'.
```php
[
'header' => "Authorization: Bearer " . $apiKey . "\r\n" .
"Accept: application/json\r\n",
'method' => 'GET',
],
];
$context = stream_context_create($options);
$responseJson = file_get_contents($url, false, $context);
// Decode the JSON response and extract the magic_link
$responseData = json_decode($responseJson, true);
$magicLink = $responseData['magic_link'] ?? '#'; // Default to '#' if not found
// Now the $magicLink variable is ready to be used in your HTML.
?>
```
***
#### Step 2: Display the Button on Your Frontend
With the `$magicLink` variable available, you can now render the button. We provide a default CSS class, `.trust-swiftly-button`, to make a standard link look like a clean, modern button.
**Method A: For PHP / Server-Rendered Pages**
If your frontend is rendered with PHP, you can inject the variable directly into the `href` attribute of an `` tag.
**HTML & PHP:**
```html
Start Identity Verification
```
**Method B: For JavaScript / Single-Page Applications (SPAs)**
If you have a separate frontend (like React or Vue), you'll fetch the link from your own backend API and then dynamically update the button.
**HTML:**
```html
Start Identity Verification
```
**JavaScript:**
```javascript
// This function fetches user data from your own backend API
async function populateVerificationLink() {
try {
// This endpoint on YOUR server should return the magic_link
const response = await fetch('/api/get-verification-link?userId=user_12345');
const data = await response.json();
if (data.magic_link) {
const button = document.getElementById('verify-button');
button.href = data.magic_link;
}
} catch (error) {
console.error('Failed to get verification link:', error);
}
}
// Call the function when the page loads
document.addEventListener('DOMContentLoaded', populateVerificationLink);
```
***
#### Step 3: Style the Link as a Button
To use our default button styling, add the following CSS class to your stylesheet. You can, of course, customize the colors to match your brand.
**Where to put this CSS?** You can add this to your main `.css` file or place it inside a `