Embed Visier With Tab Out
Learn how to allow users to open Visier in a new tab without embedding the application in your solution.
Overview
Rather than embedding Visier directly in your application, you can add a link that redirects users to Visier in a new browser tab. With minimal UI modifications, the tab out method provides a convenient solution to incorporate Visier's powerful analytics into your application's workflow.
Note: Because your users are redirected to Visier in a new browser tab, they will see your Visier URL; for example, jupiter.visier.com. The URL cannot be changed.
This method supports secure authentication through your existing Identity Provider (IdP), ensuring users do not need to re-enter credentials. You can alternatively use username and password authentication, but we don't recommend this approach because it requires users to maintain separate credentials, detracting from a seamless experience.
If opening Visier in a new tab, you must consider:
- UI integration, such as a button or link, to ensure ease of access to Visier from your application. For more information, see UI integration.
- Single sign-on (SSO) to eliminate re-entry of user credentials. For more information, see Set Up Single Sign-On.
- Redirecting users back to your application after completing their tasks in Visier. For more information, see Visier session logout and redirection.
You should be familiar with the following terms to understand this article:
- Visier App Server: The server that hosts the Visier solution. This is the interface that your users see while using Visier in your application.
- Visier Login Server: The server that hosts Visier's login interface. This is how your users access the platform.
- Administrating tenant: A tenant that manages one or more analytic tenants. Administrating tenants are capable of creating further analytic tenants and navigating to existing analytic tenants to support them.
- Analytic tenant: A tenant that represents an organization's Visier instance. Each of your customers has their own analytic tenant with a unique code and a user-friendly display name.
- Production tenant: The final version of the software that's made available to end users. The production tenant supports the project workflow so you can test changes without impacting production tenants, such as content changes, data mappings, and ETL changes.
- Integration tenant: A copy of your production tenant. You can use an integration tenant to test workflows without impacting the production tenants, such as automation, data transfers, and application integration.
Additionally, this article assumes that you already created users in Visier and assigned security permissions to users. For more information, see User Management and Permission Management.
Tip: We recommend that you validate in a pre-production environment using your partner integration tenant before integrating with the production tenant.
Prerequisites
There are a few steps you must take before you can start integrating Visier into your solution, as described next.
- Add trusted domains to the embeddable domains list. For more information, see Add Your Domain to the Embeddable Domains List.
- Enable single sign-on. For more information, see Set Up Single Sign-On.
Single sign-on allows Visier to correctly validate SAML assertions associated with the integration.
- Set up the identity provider (IdP) server. For more information, see What is an identity provider (IdP). Additionally, you can view the following example of IdP setup: How to perform IdP-initiated SSO to a Service Provider when PingFederate is the IdP.
The IdP server stores and manages digital identities. Visier's single sign-on mechanism uses your IdP to check user identity but does not store identity.
- In your Chrome browser, turn off Bypass for network. To turn off Bypass for network, open Chrome DevTools and navigate to Application > Service Workers, then turn off Bypass for network.
After you complete the prerequisites, you can start the technical development to integrate Visier into your solution.
Note: Before embedding Visier in your application, review Visier's Supported Browsers and System Requirements.
UI integration
Opening Visier in a new tab requires minimal UI work and requires no CORS setting configuration.
- Add a button or hyperlink to your application. The button or link opens Visier in a new browser tab.
- Construct the URL for the button or hyperlink. The URL is set to your IdP and may contain parameters required by the IdP to navigate the user to Visier.
The following code sample is an example of the code you might implement to open Visier from a button in your application.
HTML
<button id="visier" onclick="openVisier()">Open Visier</button>
<script>
function openVisier() {
var link = PARTNER_IDP_URL + PARAMETERS;
window.open(link);
}
</script>
You can still leverage Visier's SSO mechanism to authenticate and validate the end user and their session. For more information, see Set Up Single Sign-On. To open the solution in a new tab, you must configure your IdP to correctly post SAML assertions and redirect users to the appropriate Visier URL within the new tab.
Tab out process
The following process describes how users can open Visier in a new tab:
- User action: The user clicks a button to open Visier in a new browser tab.
- Authentication request: The new browser tab sends a request to your IdP for a SAML assertion. For more information, see Generate and post the SAML assertion.
- Assertion response: Your IdP returns a pre-loaded form with the SAML assertion.
- Assertion submission: The new browser tab uses the pre-loaded form to post the SAML assertion to the Visier Login Server.
- Token retrieval: The Visier Login Server returns a pre-loaded form to the new browser tab with a Visier token and a redirect URL.
- Token validation: The new browser tab sends the Visier token to the Visier server for authentication.
- Session establishment: The Visier server establishes a secure session and is ready to use in the new browser tab.
Generate and post the SAML assertion
To open Visier in a new tab, your IdP must generate the SAML assertion with changes to the Recipient and Audience parameters, as described in the table below. For more information about the SAML assertion, see SAML assertion parameters.
Parameter | Description | Type | Required |
---|---|---|---|
Recipient | Visier's standalone SSO endpoint URL. https://{vanity-name}.visier.com/VServer/auth/authenticateWithSaml |
string | Required |
Audience | Visier's standalone SSO endpoint URL. https://{vanity-name}.visier.com/VServer/auth/authenticateWithSaml |
string | Required |
Configure your IdP to post this generated SAML assertion to the Visier Login Server URL above. Ensure your IdP correctly redirects the user after successful authentication.
After receiving the SAML assertion, the Visier Login Server manages the creation of the Visier session and redirects the user to the appropriate Visier application.
SAML assertion parameters
Parameter | Description | Type | Required |
---|---|---|---|
X509Certificate | A digital document that securely associates a key pair with your identity. This certificate authenticates your session. | string | Required |
Issuer | The SAML assertion's issuer, such as your IdP URL. | string | Required |
nameID | The tenant user’s username within Visier's system, such as a unique email address associated with a user. For example, 12345.WFF_j1r~c7o@jupiter.com. | string | Required |
userEmail | The tenant user's email address within Visier’s system. This is the user's preferred email address for receiving email content from Visier. For example, jane@callisto.com. | string | Required |
displayName | The user's full name. If the displayName is not specified, the nameID is used. | string | Optional |
tenantCode | The tenant code within Visier’s system. For example, WFF_j1r~c7o. | string | Required |
Recipient |
Visier's SSO endpoint URL. https://{vanity-name}.visier.com/VServer/auth/authenticateWithSaml |
string | Required |
Audience |
Visier's SSO endpoint URL. https://{vanity-name}.visier.com/VServer/auth/authenticateWithSaml |
string | Required |
SessionNotOnOrAfter | A timestamp defining the maximum validity of a Visier session. | string | Optional |
locale |
The tenant user's preferred locale in the IETF BCP 47 language tag format. If specified, the locale attribute value is resolved to a locale supported by Visier and stored in the user’s preferences. This overrides any existing language preference that the user may have selected. If you enter an unsupported locale, Visier's default locale is en. For example, if you enter the unsupported locale "ja", Visier will use "en". If you enter a detailed locale variant like "es-MX", Visier will use the supported locale "es". Supported locales: en, de, es, fr. |
string | Optional |
currency |
The tenant user’s preferred currency. If specified, the currency code value is resolved to a currency supported by Visier and stored in the user’s preferences. This overrides any existing currency preference that the user may have selected. If you enter an unsupported currency, Visier’s default currency is the currency configured in the administrating tenant. Currency codes must follow ISO 4217 standards. |
string | Optional |
<samlp:Response xmlns:samlp="urn:oasis:names:tc:SAML:2.0:protocol" ID="_8b1ef66dd37707261b2e" Version="2.0" IssueInstant="2018-08-30T23:46:52Z" Destination="http://jupiter.visier.com/VServer/auth/authenticateWithSaml">
<saml:Issuer xmlns:saml="urn:oasis:names:tc:SAML:2.0:assertion">
https://jupiter.idp.com
</saml:Issuer>
<samlp:Status>
<samlp:StatusCode Value="urn:oasis:names:tc:SAML:2.0:status:Success"/>
</samlp:Status>
<saml:Assertion xmlns:saml="urn:oasis:names:tc:SAML:2.0:assertion" Version="2.0" ID="_SI3PNv7Cat4fBASmwqdCHpgtRj4QtLfT" IssueInstant="2018-08-30T23:46:52.922Z">
<ds:Signature xmlns:ds="http://www.w3.org/2000/09/xmldsig#">
<ds:SignedInfo>
<ds:CanonicalizationMethod Algorithm="http://www.w3.org/2001/10/xml-exc-c14n#"/>
<ds:SignatureMethod Algorithm="http://www.w3.org/2001/04/xmldsig-more#rsa-sha256"/>
<ds:Reference URI="#_SI3PNv7Cat4fBASmwqdCHpgtRj4QtLfT">
<ds:Transforms>
<ds:Transform Algorithm="http://www.w3.org/2000/09/xmldsig#enveloped-signature"/>
<ds:Transform Algorithm="http://www.w3.org/2001/10/xml-exc-c14n#"/>
</ds:Transforms>
<ds:DigestMethod Algorithm="http://www.w3.org/2001/04/xmlenc#sha256"/>
<ds:DigestValue>
BOzuMvpBUGbnhp+JfygodVx5aX1Jmvi5P7jphZV36e8=
</ds:DigestValue>
</ds:Reference>
</ds:SignedInfo>
<ds:SignatureValue>
a/4DP6QkBv1YIz71JeghbX12I6ba+pl7BHUyRzP80Lwu2BBYrgWbCDrtzaS113HIkYkpD01qnyh4+/OMdBjMJkL61h/Z6ZrjNCi4QfMx2B1M2+XNiQGMvWygZdIuOzxOvJD1/xGqs82444+7l9j1xo0gIqRGMhwnKTVP5gPUUPvPNQzPosxzxSH64J0wXd87pVkkLSE/iK5AXooATsPYxwSd4rBKuxLg29SDyW3lnHr5dSoKmSsgVWbj4bUDGbK0gprRu0LwEiKnvqv8VJU/2sGSFucWT6n5N7SGHEuIIpVl81my7jIbc6vk5Vf6SEaQkbpKZE9cm95OOjRX6OuzAA==
</ds:SignatureValue>
<ds:KeyInfo>
<ds:X509Data>
<ds:X509Certificate>
MIIC+jCCAeICCQCCGzRFLDFnaDANBgkqhkiG9w0BAQUFADA/MQswCQYDVQQGEwJDQTELMAkGA1UECAwCQkMxEjAQBgNVBAcMCVZhbmNvdXZlcjEPMA0GA1UECgwGVmlzaWVyMB4XDTE4MDYwOTA2NDcyN1oXDTE5MDYwOTA2NDcyN1owPzELMAkGA1UEBhMCQ0ExCzAJBgNVBAgMAkJDMRIwEAYDVQQHDAlWYW5jb3V2ZXIxDzANBgNVBAoMBlZpc2llcjCCASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoCggEBAKqeZZXPkZgRpkLLoFzO1FosFctYsDTqKy6qsdp8DFJg25ulO/uFFR+pibyitcRRUgCxE7QS9O1MO9KVSGnMEFYBQApx02nYKOpZdnvYkjBdAZknVx/+5S/mBZ5ywHS77oWyvEjCvIpXonc9q8Az+PcTsTRmmhkICXqHF5PJltmeTv4nq8hIpaajMTZdvAjfxFOc/b1eAfdYrH9eQxY1GllTv/JhuVfP1fY5p3CpAyWun365rWNNF+aTgIltf/qkvP6Fleug/az+kxonECZrWm9ryZbXHnkJblds1Z0FIxOP2CPdIkh1Plo3TtE60AnTeSyMJTGl2F0ttGTL3fN6uxECAwEAATANBgkqhkiG9w0BAQUFAAOCAQEAYnk353ZXG/5ElowpjAMoCddU/yl9WxqMmNPnVY+t6xYbq6Mg6P7deLQ1vw2uTi1KgRFUUklamAwhLMqrHMJnWMNTZmlOsaVlH81P6dwtqxyI7nttpDVK0sLGRP3j0TnzTyPMyqFdXAiSJULVJwLCdIQAz7NInsWKYp+nzLc9a7ve1fgSPkhrrpDoddhWoSniatbI9iHJ+/fr0XOghk9yMzQF0kvmtkKGKpdZbpMYerBT+lZ9zIY+B6vomFva0lhKdRSvd8wsIa8MMUycI4oZDSRvbzfPHlwXMiE0mB3vMFdfIBEuw9xMvnk6wMb89fj8sxMDckB9TuLu1jX4LqHvNA==
</ds:X509Certificate>
</ds:X509Data>
</ds:KeyInfo>
</ds:Signature>
<saml:Issuer>
https://jupiter.idp.com
</saml:Issuer>
<saml:Subject>
<saml:NameID Format="urn:oasis:names:tc:SAML:1.1:nameid-format:emailAddress">
ceo@jupiter.com
</saml:NameID>
<saml:SubjectConfirmation Method="urn:oasis:names:tc:SAML:2.0:cm:bearer">
<saml:SubjectConfirmationData NotOnOrAfter="2018-08-31T00:46:52.922Z" Recipient="http://jupiter.visier.com/VServer/auth/authenticateWithSaml"/>
</saml:SubjectConfirmation>
</saml:Subject>
<saml:Conditions NotBefore="2018-08-30T23:46:52.922Z" NotOnOrAfter="2018-08-31T00:46:52.922Z">
<saml:AudienceRestriction>
<saml:Audience>
http://jupiter.visier.com/VServer/auth/authenticateWithSaml
</saml:Audience>
</saml:AudienceRestriction>
</saml:Conditions>
<saml:AuthnStatement AuthnInstant="2018-08-30T23:46:52.922Z" SessionNotOnOrAfter="2018-08-31 T23:46:52.922Z" SessionIndex="614491951">
<saml:AuthnContext>
<saml:AuthnContextClassRef>
urn:oasis:names:tc:SAML:2.0:ac:classes:PasswordProtectedTransport
</saml:AuthnContextClassRef>
</saml:AuthnContext>
</saml:AuthnStatement>
<saml:AttributeStatement xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<saml:Attribute Name="tenantCode" NameFormat="urn:oasis:names:tc:SAML:2.0:attrname-format:basic">
<saml:AttributeValue xsi:type="xs:string">WFF_j1r~c7o</saml:AttributeValue>
</saml:Attribute>
<saml:Attribute Name="userEmail" NameFormat="urn:oasis:names:tc:SAML:2.0:attrname-format:basic">
<saml:AttributeValue xsi:type="xs:string">jane@callisto.com</saml:AttributeValue>
</saml:Attribute>
<saml:Attribute Name="locale" NameFormat="urn:oasis:names:tc:SAML:2.0:attrname-format:basic">
<saml:AttributeValue xsi:type="xs:string">de</saml:AttributeValue>
</saml:Attribute>
</saml:AttributeStatement>
</saml:Assertion>
</samlp:Response>
Visier session logout and redirection
Given that the Visier solution is launched in a standalone tab, the user can click the Logout button to end their Visier session. To handle redirection when this occurs, you can define a logout URL in Visier's SSO settings. For more information, see Set Up Single Sign-On.
We strongly recommend that the logout URL field is configured to avoid redirecting your user to the Visier login page upon logging out. The user is instead redirected to a URL of your choice when logout occurs.
Note: This field is optional because the user cannot explicitly log out of Visier when the solution is embedded within your product. In tab out, users can log out of Visier.
Set up uptime monitoring (recommended)
We strongly recommend that you set up uptime monitoring as part of your UI integration. To enable uptime monitoring, give Visier a dummy user access in your production environment. This allows Visier to ping your production application every 15 minutes to spot any outage in a timely manner. Pinging your application enables 100% monitoring capabilities. Without this, Visier cannot accurately monitor uptime between both applications.
Troubleshooting
First, ensure that your program listeners properly handle events and messages that are returned. If your issue persists, see Technical FAQ for Embedded Partners.
If you cannot find answers on your own, please gather the following information before contacting Visier:
- Error messages
- RCI (the unique error code for each type of the errors)
- Reproduction steps
- Expected behavior and current behavior
- Time stamp
- Screenshots or screen recording
- Username or user ID, if applicable
- Request URL, header, and body, if applicable
The more information provided, the easier it is for Visier to troubleshoot. You can track the issue in the issue logs shared between yourself and Visier.
Next steps
After your embedded integration is implemented, you can perform integration testing, scalability testing, and performance testing.
In addition to testing, you can optionally set up email push analyses. Email push allows administrators to deliver analyses straight to a user's inbox immediately or on a recurring schedule. Email push draws users into analytics by making analytics readily available to them. Email push improves adoption of analytics ussage by pushing analysis insights to your end users. This experience increases the number of impressions on an analysis and attract email recipients to log in to Visier.
Analysis authors can see the following benefits from email push:
- Directly notifies their users of important metrics and information that should be top of mind.
- Streamlines the author's workflow of producing monthly reports. Authors can produce a dynamic report and schedule it instead of manually drafting and emailing it each month.
Analysis recipients can receive the following benefits from email push:
- Saves time as they can consume insights directly without having to log in to Visier.
- Allows them to easily monitor on a frequent and consistent basis.
The first six charts or images in the analysis will be included in the email message and includes the most up-to-date information. The email includes a link to the analysis so that recipients can explore the rest of the content in Visier.
Note: Email push analyses are sent from Visier's domain. To ensure the analyses aren't marked as spam, ask your IT team to add the address @visier.com to your allowlist.
For more information, see Create an Email Push Schedule.