Viafoura Integration

Enable Viafoura Community Chat, Conversations and Notifications inside StorifyMe experiences. This guide shows how to bridge auth (cookie or OIDC token) and load Viafoura alongside your StorifyMe widget.

Prerequisites

The customer already uses Viafoura on their site (loader script present).
The customer has Custom Domain enabled in StorifyMe.
That domain is allow-listed / added as an alias for the customer in the Viafoura platform (done by Viafoura).

tip

If Viafoura widgets don’t load on your story/short pages, first verify the domain allow-list.

Configure in StorifyMe

Manage defaults (enable Viafoura, notifications, overlay per surface) in StorifyMe → Integrations → Viafoura: https://app.storifyme.com/integrations/viafoura

Enable Viafoura (account-wide)
Notifications (tray / floating bell)
Overlay by surface (Stories/Shorts: Chat or None)
(Optional) Comment counts (if you also use Conversations)

info

Changes here apply to all stories/shorts by default. You can add per-story overrides later if needed.

What you’ll add

StorifyMe Web Components script and your story/short/widget embed.
A tiny auth bridge so the same logged-in user applies to both Viafoura and StorifyMe.
(Optional) A simple overlay drawer that opens Viafoura Chat when users tap your chat icon.

1) Load scripts

index.html
<!-- StorifyMe web components -->
<script async defer src="https://cdn.storifyme.com/static/web-components/storifyme-elements.min.js"></script>

2) Embed StorifyMe

Use any of our elements; here’s a collection example:

index.html
<storifyme-collection
  id="widgetId"
  account="<ACCOUNT_ID>"
  widget="<WIDGET_ID>"
  env="<ENV>">
</storifyme-collection>

info

Replace <ACCOUNT_ID>, <WIDGET_ID>, and <ENV> with your values.

3) Bridge authentication

You likely already log users into Viafoura on your site. Mirror that session into StorifyMe so comments/chat work seamlessly inside your stories/shorts.

viafoura-auth-bridge.js
function setCookieInStorifyMe(cookie) {
  const w = document.querySelector('#widgetId');
  const apply = () => w.integrations?.viafoura?.setCookie?.(cookie);

  if (w.integrations?.viafoura?.setCookie) apply();
  else w.addEventListener('onInitialized', apply, { once: true });
}

// Somewhere in your code you already do:
window.vf.session.login.cookie(cookieValue);

// ➜ Also mirror into StorifyMe:
setCookieInStorifyMe(cookieValue);

viafoura-auth-bridge.js
function setTokenInStorifyMe(token) {
  const w = document.querySelector('#widgetId');
  const apply = () => w.integrations?.viafoura?.setViafouraToken?.(token);

  if (w.integrations?.viafoura?.setViafouraToken) apply();
  else w.addEventListener('onInitialized', apply, { once: true });
}

// You log into Viafoura like:
window.vf.session.login.openIdConnect(token);

// ➜ Also mirror into StorifyMe:
setTokenInStorifyMe(token);

note

Use one auth method consistently (cookie or token).

4) Minimal overlay pattern (optional)

Most sites show Viafoura Chat in a swipe-up / drawer overlay. Here’s a simple pattern you can adapt:

index.html
<button id="open-chat" class="vf-bubble">🗨 Chat</button>

<!-- Simple drawer shell -->
<div id="vf-drawer" hidden>
  <div class="vf-drawer__backdrop"></div>
  <div class="vf-drawer__panel">
    <button id="close-chat" aria-label="Close">✕</button>
    <div class="viafoura">
      <!-- Per-story chat: set container id to keep rooms separated -->
      <vf-livechat vf-container-id="storifyme-<ACCOUNT_ID>-<STORY_ID>"></vf-livechat>
    </div>
  </div>
</div>

styles.css
/* Basic drawer styling (customize as you like) */
#vf-drawer[hidden]{ display:none; }
#vf-drawer{ position:fixed; inset:0; z-index:9999; }
.vf-drawer__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.4); }
.vf-drawer__panel{
  position:absolute; left:0; right:0; bottom:0;
  max-height:80vh; background:#fff; border-radius:16px 16px 0 0;
  transform:translateY(24px); opacity:0; transition:.2s ease;
}
#vf-drawer.is-open .vf-drawer__panel{ transform:translateY(0); opacity:1; }

overlay.js
const drawer = document.getElementById('vf-drawer');
const openBtn = document.getElementById('open-chat');
const closeBtn = document.getElementById('close-chat');

openBtn.addEventListener('click', () => {
  drawer.hidden = false;
  requestAnimationFrame(() => drawer.classList.add('is-open'));
});

closeBtn.addEventListener('click', () => {
  drawer.classList.remove('is-open');
  drawer.addEventListener('transitionend', () => (drawer.hidden = true), { once: true });
});

5) Full example

Works only if your host domain is allow-listed in Viafoura.

full-example.html
<html>
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="viewport-fit=cover,width=device-width,initial-scale=1"/>
    <script async defer src="https://cdn.storifyme.com/static/web-components/storifyme-elements.min.js"></script>
  </head>
  <body>
    <button id="login-btn-1">Login User</button>
    <button id="logout-btn-1">Logout User</button>

    <storifyme-collection id="widgetId" account="ACCOUNT_ID" widget="WIDGET_ID" env="dev"></storifyme-collection>

    <script>
      function setCookieInStorifyMe(cookie) {
        const w = document.querySelector('#widgetId');
        const apply = () => w.integrations?.viafoura?.setCookie?.(cookie);
        if (w.integrations?.viafoura?.setCookie) apply();
        else w.addEventListener('onInitialized', apply, { once: true });
      }

      const serverUrl = 'https://dev.storifyme.com';
      const sessionId = 'storifyme-111';

      window.vfQ = window.vfQ || [];
      window.vfQ.push(() => {
        const loginBtn = document.getElementById('login-btn-1');
        const logoutBtn = document.getElementById('logout-btn-1');

        loginBtn.onclick = async () => {
          try {
            // Example only. Replace with your login.
            const res = await fetch(`${serverUrl}/platforms/viafoura/login?session=${sessionId}`, {
              method: 'POST',
              credentials: 'include'
            });
            if (res.ok) {
              const cookieValue = await res.text();
              window.vf.session.login.cookie(cookieValue);
              setCookieInStorifyMe(cookieValue);
            }
          } catch (e) { console.warn(e); }
        };

        logoutBtn.onclick = async () => {
          try {
            await fetch(`${serverUrl}/platforms/viafoura/logout`, { method: 'POST', credentials: 'include' });
            window.vf.session.logout();
          } catch (e) { console.warn(e); }
        };

        // Optional: debug hooks
        window.vf.$subscribe('login', 'success', (ctx) => console.log('✅ Viafoura login', ctx));
        window.vf.$subscribe('login', 'failure', (err, loginCtx) => console.log('🚪 Viafoura login failed', err, loginCtx));
      });
    </script>

    <script async src="https://cdn.viafoura.net/entry/index.js"></script>
  </body>
</html>

Configuration in StorifyMe (account-level)

Inside Integrations → Viafoura:

Enable Viafoura (master toggle)
Notifications: show Viafoura tray / floating bell
Overlay by surface:
- Stories: Chat or None
- Shorts: Chat or None
(Optional) Comment counts (only relevant if you also use Viafoura Conversations)

You can add per-story overrides later; most teams start with account-level defaults only.

Troubleshooting

Widgets don’t show on story pages
Ensure the domain is allow-listed in Viafoura for this customer.
Styles not applying until user clicks
If you create DOM and add classes in the same tick, defer the class change:
```
container.appendChild(el);
requestAnimationFrame(() => el.classList.add('enter'));
```
For custom elements (e.g., <vf-tray-trigger>), style the host element or use ::part()/CSS vars exposed by the component.
User looks logged out inside the story
Double-check you’re calling setCookieInStorifyMe(cookie) or setViafouraToken(token) right after logging into Viafoura.

FAQ

Do I need to pass a Viafoura “domain” attribute?
Not typically. Just make sure your site’s domain is allow-listed by Viafoura.

How do I isolate chats per story?
Use a unique container id for chat rooms, e.g., storifyme-<ACCOUNT_ID>-<STORY_ID>.

Can I add Conversations later?
Yes. Keep your overlay drawer pattern; you can switch from Chat to Conversations without changing your page layout.

Web SDK

Mobile SDK

Web SDK

Mobile SDK

Web SDK

Mobile SDK

Web SDK

Mobile SDK

Prerequisites​

Configure in StorifyMe​

What you’ll add​

1) Load scripts​

2) Embed StorifyMe​

3) Bridge authentication​

A) Cookie login​

B) OIDC / token login​

4) Minimal overlay pattern (optional)​

5) Full example​

Configuration in StorifyMe (account-level)​

Troubleshooting​

FAQ​

Prerequisites

Configure in StorifyMe

What you’ll add

1) Load scripts

2) Embed StorifyMe

3) Bridge authentication

A) Cookie login

B) OIDC / token login

4) Minimal overlay pattern (optional)

5) Full example

Configuration in StorifyMe (account-level)

Troubleshooting

FAQ