By embedding the Ascendr customer portal directly into your application, you provide your users with a seamless experience, allowing them to access project updates, onboarding progress, and support without leaving your platform. This integration not only enhances user engagement but also streamlines communication, ensuring that your customers stay informed and connected within your existing environment.
Add Your Domain in Ascendr
First, you'll need to allow the domain where the iframe will be integrated. Follow these steps:
- Go to Settings by clicking the gear icon in the bottom-left corner.
- Select the Integrations tab.
- Click on the Add Domain button.
- Enter your domain and save it.
Refer to the screenshot below for further guidance.
2. Generate a JWT Token in Your Application
To securely pass data to the Ascendr iframe, you'll need to create a JWT (JSON Web Token) in your application. Here's how:
JWT Token Parameters
The token must include the user's email address and systemName to ensure proper authentication with Ascendr.
The JWT token should have the following parameters:
- `iss` (Issuer): Your website or application, e.g. `website-B`.
- `iat` (Issued At): The time the token is created.
- `exp` (Expiry): When the token should expire (e.g. 1 hour).
- `email`: The logged-in user's email address.
- `systemName`: The system name of the logged-in user.
Here's a sample code snippet to create the JWT token:
$header = json_encode(['typ' => 'JWT', 'alg' => 'HS256']);
$payload = json_encode([
'iss' => 'website-B', // Issuer
'iat' => time(), // Issued at: time when the token was generated
'exp' => time() + 3600,
'email' => ’logged_user_email’,
'systemName' => ’logged_user_systemname’,
]);
$secretKey = 'YOUR_SECRET_KEY'; // Replace with your secret key
$jwtToken = createToken($header, $payload, $secretKey);
//The function is defined below
function createToken($header, $payload, $secretKey) {
$base64UrlHeader = str_replace(['+', '/', '='], ['-', '_', ''], base64_encode($header));
$base64UrlPayload = str_replace(['+', '/', '='], ['-', '_', ''], base64_encode($payload));
$signature = hash_hmac('sha256', $base64UrlHeader . "." . $base64UrlPayload, $secretKey, true);
$base64UrlSignature = str_replace(['+', '/', '='], ['-', '_', ''], base64_encode($signature));
$jwt = $base64UrlHeader . "." . $base64UrlPayload . "." . $base64UrlSignature;
return $jwt;
}
3. Embed the Iframe into Your Application
After generating the JWT token, add the following code to embed the Ascendr portal into your website. Replace `ADD_YOUR_JWT_TOKEN_HERE` with the JWT token you generated.
<iframe src="https://app.ascendr.co.uk/login?token=ADD_YOUR_JWT_TOKEN_HERE" name="application_integration" height="300px" width="100%" title="Projects" id="application_integration"></iframe>
This iframe will display the Ascendr customer portal within your application.
That's it! If you run into any issues or have questions, feel free to reach out for support.