A portal where donors manage their giving.
The client portal (portal-v1) lets your donors sign in with BankID and see their gifts, change or cancel a monthly donation, switch payment method, download receipts and keep their details up to date. It's a widget like the fundraising embeds: put it on your own page, link to the hosted page, or frame the hosted page.
§ 01.8.1 What donors can do #
| Area | What the signed-in donor can do |
|---|---|
| Subscriptions | See monthly gifts and other subscriptions. Change the amount, cancel, resume a cancelled one before it ends, and switch payment method or update the card. |
| Orders | Browse past gifts and purchases and download receipts as PDF. |
| Profile | View and edit contact details. |
| Events and forms | See event registrations and submitted forms. |
Which of these show up depends on your account and the portal's settings. Without the full client portal on your Octany plan, the portal only lets donors manage the payment method on their subscriptions. Changing amounts and cancelling can each be turned off per portal. Only donation subscriptions can have their amount changed.
§ 01.8.2 Embed on your page #
This is the recommended option, and the one to use when you want to keep your own header, menu and footer around the portal. Copy the embed code from the portal in Octany admin. It has the same shape as every other fundraising embed:
<div class="octany-portal-widget"></div> <script type="module" src="https://give.octany.com/portal-v1/loader.js?api=https://app.octany.com/widget/1234&widget=01HXXXXXXXXXXXXXXXXXXXXXXX" ></script>
| Parameter | Required | Description |
|---|---|---|
| api | Yes | https://app.octany.com/widget/{account}, where {account} is your account ID. |
| widget | Yes | The portal's widget ID, 26 characters. |
| lang | No | Two-letter language code, e.g. sv or en. Defaults to the portal's language. |
This isn't an iframe. The portal renders straight into the container, inside a Shadow DOM, so your stylesheets don't reach into the portal and the portal's styles don't leak into your page. It fills the container's width.
On WordPress, the Octany plugin renders the same snippet with [octany type="portal-v1" account="1234" widget="01HXXXXXXXXXXXXXXXXXXXXXXX"] or the Octany widget block.
§ 01.8.3 Hosted page #
Every portal also has its own page on Octany. It's the preview link in Octany admin:
https://app.octany.com/widget/{account}/{widget}/portal
The page holds only the portal and fills the screen. Link to it from your site's menu if you don't want to embed anything.
§ 01.8.4 iframe #
You can frame the hosted page. Octany doesn't block framing, and the portal keeps sign-in in the page rather than in cookies, so it works even when the browser blocks third-party cookies.
<iframe src="https://app.octany.com/widget/1234/01HXXXXXXXXXXXXXXXXXXXXXXX/portal" title="My giving" style="display:block; width:100%; height:85vh; border:0" ></iframe>
- You set the height. The portal doesn't report its height to the parent page, so give the iframe a fixed height. Something close to the viewport, like
85vh, works best because the portal scrolls inside itself. - Links leave the frame. The "Back to" button and the logout redirect navigate the whole window, not just the iframe.
- Test BankID on a phone. Opening the BankID app from inside an iframe can behave differently from a top-level page in some mobile browsers.
Prefer embedding when you can: you get the same result without an iframe, and nothing to size.
§ 01.8.5 Keeping your header #
Both the embed and the iframe keep your own header, menu and footer around the portal. A few things about the portal's layout are worth planning for:
- It's one screen tall. The portal is always as tall as the browser window. Once a donor is signed in, its content scrolls inside the portal. With your header above it, the page scrolls down to the portal and the portal then scrolls on its own. A dedicated page with your header, the portal and little else works best. Avoid putting other content under it.
- It has its own header. At the top of the portal: your account's logo, a "Back to {your site}" button and "Log out". Under your own header, that means two headers. Leave Website URL empty to drop the back button when your own menu already links home. The logo comes from your account's appearance settings and shows whenever one is set.
- It uses the URL hash. The portal's pages live in the hash of your page's URL (
#/home,#/orders, and so on), so the browser's back button works within the portal. Don't put the portal on a page that uses the hash for its own routing, and use one portal per page.
§ 01.8.6 Sign-in #
Donors sign in with BankID: by scanning a QR code, or by opening the BankID app on the same device. The portal signs them in as a contact that already exists in Octany. There's no sign-up, so a donor who has never given or been imported can't get in.
Contacts without a personnummer in Octany can't be matched by BankID. Turn on Allow email or SMS activation for contacts without personnummer to let them prove who they are with a code sent to their email or phone. They then confirm with BankID, which adds the personnummer to their contact. From then on they sign in with BankID like everyone else.
- Email codes are valid for 15 minutes, SMS codes for 10.
- If several contacts share an email or phone number, such as a family, the donor picks which one to manage after entering the code.
- A contact that already has a personnummer is always asked to use BankID.
§ 01.8.7 Sessions #
After sign-in, the portal keeps a session token in the browser's sessionStorage on your page's domain, one per portal. No cookies are involved. In practice:
- A reload keeps the donor signed in. A new tab or window asks them to sign in again.
- Closing the tab signs them out.
- By default a session lasts at most 30 days and ends after 14 days without activity.
- Log out ends the session and, if a logout URL is set, sends the whole window there.
Because sign-in lives in your page's storage, it never carries over to your own site's login. The portal and your site don't share users.
§ 01.8.8 Settings #
Set these on the portal in Octany admin:
| Setting | What it does |
|---|---|
| Non-profit portal | Use donation wording instead of purchase wording. On by default. |
| Hero image | Image across the top of the portal and the sign-in screen. |
| Colors | Background, titles, tab background and text, active tab background and text. |
| Allow email or SMS activation for contacts without personnummer | See Sign-in. |
| Allow contacts to change subscription amounts | Shows the change-amount action on donation subscriptions. |
| Allow contacts to cancel subscriptions | Shows the cancel action. |
| Website URL | Shows a "Back to {site}" button in the portal's header. Leave it empty to hide the button. |
| Logout URL | Where the window goes after logout. Leave it empty to stay on the sign-in screen. Use an https:// URL. |
§ 01.8.9 Requirements #
- Donors need BankID and must already exist as contacts in Octany. See Sign-in.
- A page that doesn't use the URL hash for its own routing, with one portal on it.
- Room for a full-height portal, ideally on a page of its own. See Keeping your header.
- Content Security Policy. If your site sends a CSP, allow:
script-src https://give.octany.com https://js.stripe.comconnect-src https://app.octany.com https://api.stripe.comimg-src https://octany-public.s3.eu-west-1.amazonaws.com data:for the logo, hero image and BankID QR codeframe-src https://js.stripe.com https://hooks.stripe.com https://*.britepaymentgroup.comfor card updates and autogiro bank selection
- Style the hosted page even when you embed, since payment reminder emails link there.