How to upscribe with AI Design Proposal

Integrate with AI Design Proposal is very straightforward, the entire process shouldn’t take more than an hour. Please follow the steps bellow, and contact us when need technical support.

Ask FetchAI to give you an access token and an UTM identifier, and save it in your environemnt var, e.g.

NEXT_PUBLIC_BEEHIIV_KEY=TeSHcUyCngpJzOl9lKXyCSBFjOb2iEad...
NEXT_PUBLIC_BEEHIIV_UTM=YOU_APP_IDENTIFIER

Create a Beehiiv client, e.g. “BeehiivClient.ts”

import axios, { AxiosInstance } from "axios"

type SubscribeOptions = {
  reactivate_existing: boolean
  send_welcome_email: boolean
  utm_source: string
  utm_campaign: string
  utm_medium: string
  referring_site: string
  custom_fields: {
    name: string
    value: string
  }[]
}

class BeehiivClient {
  axios: AxiosInstance
  publicationId: string

  constructor(key: string, publicationId: string) {
    this.publicationId = publicationId
    this.axios = axios.create()
    this.axios.interceptors.request.use(
      (config) => {
        // set token
        config.headers["Authorization"] = `Bearer ${key}`
        return config
      },
      (error) => {
        return Promise.reject(error)
      }
    )
  }
  async subscribe(email: string, options?: SubscribeOptions) {
    const response = await this.axios.post(
      `https://api.beehiiv.com/v2/publications/${this.publicationId}/subscriptions`,
      {
        email,
        ...options,
      }
    )

    return response.data
  }
}

const createClient = (key: string, publicationId: string) => {
  return new BeehiiveClient(key, publicationId)
}

const beehiivClient = createClient(
  process.env.NEXT_PUBLIC_BEEHIIV_KEY || "",
  "pub_f2a2f57c-222b-489a-b6d3-b1a54c3bf4f3"
)

export default beehiivClient

Create an Upscribe component, e.g. “UpscribeTerms.tsx”

export default function UpscribeTerms({ button }: { button: string }) {
  return (
      <div className="max-w-[352px] mt-3">
        By Clicking {button}, you agree to the{" "}
        <a href="/terms" className="text-purple-500">
          Terms of Service
        </a>{" "}
        and{" "}
        <a href="/privacy" className="text-purple-500">
          Privacy Policy
        </a>
        , and agree to join the mailing list of the{" "}
        <a href="https://fetchai.news/" className="text-purple-500">
          FetchAI Newsletters
        </a>{" "}
      </div>
  )
}

In your “Login” and “Sign Up” screen, display the “UpscribeTerms” component

...
<UpscribeTerms button="Sign Up" />
...

Define the middleware API route for the BeehiivClient, e.g. “app/api/upscribe/route.ts”

import beehiivClient from "@lib/BeehiivClient"

export async function POST(req: Request) {
  if (req.method === "POST") {
    try {
      const { email, options } = await req.json()
      const res = await beehiiveClient.subscribe(email, options)
      return new Response(JSON.stringify(res), {
        status: 200,
      })
    } catch (err: any) {
      console.log(err)
      return new Response(
        JSON.stringify({ error: { statusCode: 500, message: err.message } }),
        {
          status: 500,
        }
      )
    }
  } else {
    return new Response("Method Not Allowed", {
      headers: { Allow: "POST" },
      status: 405,
    })
  }
}

When your user do the Sign Up, or Login via third parties (e.g. Google) for the first time, call the API you just defined above to send the data.

    fetch(`/api/upscribe`, {
        method: "POST",
        body: JSON.stringify({
          email: user.email,
          options: {
            utm_source: process.env.NEXT_PUBLIC_BEEHIIV_UTM,
          },
        }),
      })