Resubscribe Vue SDK

The official Vue SDK for Resubscribe.

Setup

Install

npm install resubscribe-vue-sdk

Usage

First register Resubscribe with Vue where you are mounting the app.

import ResubscribeVueSdk from 'resubscribe-vue-sdk';
const Vue = createApp(App);
Vue.use(ResubscribeVueSdk);
Vue.mount('#app')

Add the component and then trigger the Resubscribe modal with the openWithConsent method. Replace the placeholders with your own values.

<script setup>
import Resubscribe from 'resubscribe-vue-sdk'

const onTrigger = () => {
    Resubscribe.openWithConsent({
        slug: '{organization-slug}',
        apiKey: '{api-key}',
        aiType: '{ai-type}',
        userId: '{uid}',
        userEmail: '{optionalEmail}',
        colors: {
            primary: '#31B15F',
            background: '#fff',
            text: '#333',
        },
        metadata: {
            'string-key': 'custom-value',
            'number-key': 123,
            'boolean-key': true,
            'null-key': null,
        },
    })
}
</script>

<template>
  <main>
    ...
    <ResubscribeComponent />
  </main>
</template>

Headless

You can alternatively use the headless version of the SDK.

<script setup>
import Resubscribe from 'resubscribe-vue-sdk'

const handleClick = () => {
    Resubscribe.headless.setOptions({
        slug: '{organization-slug}',
        apiKey: '{api-key}',
        aiType: '{ai-type}',
        userId: '{uid}',
        userEmail: '{optionalEmail}',
    });
    Resubscribe.headless.registerConsentRequest();
    // Open your own consent modal here 👇
    const confirmed = await confirm(...);

    if (confirmed) {
        Resubscribe.headless.openChat({
            onClose: (via) => {
                console.log('onClose', via);
            },
        });
    }
}
</script>

<template>
  <main>
    ...
    <ResubscribeComponent />
  </main>
</template>