Let editors add vanes from your CMS

Portable Text doesn't allow raw HTML, so a pasted script would show up as text. Add a vanePoll object type instead. Editors get a VANE it poll option in the insert menu of the body field, with a Vane ID box and a choice of how it shows.

1. Create schemaTypes/vanePoll.ts with the code below and register it in schemaTypes/index.ts.
2. Add defineArrayMember({type: 'vanePoll'}) to the of list of your body field.
3. In your front end, add a vanePoll entry to the types in your PortableText components.
4. Deploy the Studio (npx sanity deploy, or however you host it) and the site.

import {defineType, defineField} from 'sanity'

export const vanePoll = defineType({
  name: 'vanePoll',
  title: 'VANE it poll',
  type: 'object',
  fields: [
    defineField({
      name: 'vaneId',
      title: 'Vane ID',
      type: 'string',
      description: 'In VANE it: open the vane, then Embed on your site, then Copy ID.',
      validation: (rule) => rule.required(),
    }),
    defineField({
      name: 'place',
      title: 'How it shows',
      type: 'string',
      initialValue: 'inline',
      options: {
        layout: 'radio',
        list: [
          {title: 'A button in the text', value: 'inline'},
          {title: 'An open card', value: 'section'},
          {title: 'Floating in the corner', value: 'float-br'},
        ],
      },
    }),
  ],
  preview: {
    select: {subtitle: 'vaneId'},
    prepare: ({subtitle}) => ({title: 'VANE it poll', subtitle}),
  },
})

defineField({
  name: 'body',
  type: 'array',
  of: [
    defineArrayMember({type: 'block'}),
    defineArrayMember({type: 'image'}),
    defineArrayMember({type: 'vanePoll'}),   // add this line
  ],
})

// and register the type in schemaTypes/index.ts
export const schemaTypes = [post, vanePoll /* , ... */]

import {PortableText} from '@portabletext/react'
import {Vane} from '@/components/Vane'

<PortableText
  value={post.body}
  components={{
    types: {
      vanePoll: ({value}) => <Vane id={value.vaneId} place={value.place} />,
    },
  }}
/>

The block's data comes back with the rest of the body in your existing GROQ query. There's no reference to expand.

Did it work? In Studio, the body field's insert menu shows VANE it poll. After publishing, the vane appears at that point in the post.

Rich Text has no raw HTML node. Make a small content type and allow it as an embedded entry.

1. In Content model, add a content type named VANE it poll with the ID vanePoll, and a Short text field vaneId (plus place if you want the placement choice).
2. Open your Rich Text field's settings and allow Embedded entries, limited to VANE it poll.
3. Render BLOCKS.EMBEDDED_ENTRY with the code below.

import {documentToReactComponents} from '@contentful/rich-text-react-renderer'
import {BLOCKS} from '@contentful/rich-text-types'
import {Vane} from '@/components/Vane'

const options = {
  renderNode: {
    [BLOCKS.EMBEDDED_ENTRY]: (node) => {
      const entry = node.data.target
      if (entry?.sys?.contentType?.sys?.id !== 'vanePoll') return null
      return <Vane id={entry.fields.vaneId} place={entry.fields.place} />
    },
  },
}

documentToReactComponents(post.fields.body, options)

With the REST API the embedded entry comes back resolved in node.data.target. With GraphQL, fetch it through links { entries { block } } and look it up by ID.

Did it work? Editors see Embed entry in the Rich Text toolbar and can pick or create a VANE it poll. The vane shows at that point on the page.

Make a nestable block that editors can drop into any Blocks field, or into Richtext.

1. In Block library, create a nestable block vane_poll with a Text field vane_id.
2. Allow it in the Blocks field where editors should use it.
3. Register the component below with storyblokInit.

import {storyblokEditable} from '@storyblok/react'
import {Vane} from '@/components/Vane'

export default function VanePoll({blok}) {
  return (
    <div {...storyblokEditable(blok)}>
      <Vane id={blok.vane_id} place={blok.place} />
    </div>
  )
}

// where you call storyblokInit
storyblokInit({
  accessToken: process.env.STORYBLOK_TOKEN,
  use: [apiPlugin],
  components: {vane_poll: VanePoll /* , ... */},
})

Blocks inside Richtext render through the SDK's rich text renderer using the same registered component.

Did it work? In the Visual Editor, VANE it poll is in the add-block menu. The vane shows in the live preview once the vane is live.

Create a component and add it to the dynamic zone your pages already use.

1. In Content-Type Builder, create a component VANE it poll in an embeds category, with a Text field vaneId. Or add the JSON below.
2. Add it to your content type's dynamic zone.
3. Make sure your API call populates the dynamic zone, then render it as below.

{
  "collectionName": "components_embeds_vane_polls",
  "info": { "displayName": "VANE it poll" },
  "attributes": {
    "vaneId": { "type": "string", "required": true }
  }
}

// in your content type's schema.json
"body": { "type": "dynamiczone", "components": ["embeds.vane-poll"] }

{page.body?.map((block) =>
  block.__component === 'embeds.vane-poll'
    ? <Vane key={block.id} id={block.vaneId} />
    : null  /* your other components */
)}

Did it work? Editors can add VANE it poll to the dynamic zone. The vane shows at that position on the page.

Add a block to your layout's blocks field. It also works inside the Lexical rich text editor through BlocksFeature.

1. Create blocks/VanePoll.ts below and add it to your blocks field.
2. Render it where you map your other blocks.
3. For rich text, add it to BlocksFeature({ blocks: [VanePoll] }) and give RichText a vanePoll converter that returns the Vane component.

import type {Block} from 'payload'

export const VanePoll: Block = {
  slug: 'vanePoll',
  labels: {singular: 'VANE it poll', plural: 'VANE it polls'},
  fields: [{name: 'vaneId', label: 'Vane ID', type: 'text', required: true}],
}

// in your collection
{name: 'layout', type: 'blocks', blocks: [VanePoll /* , ... */]}

{page.layout?.map((block) =>
  block.blockType === 'vanePoll'
    ? <Vane key={block.id} id={block.vaneId} />
    : null  /* your other blocks */
)}

Did it work? Editors see VANE it poll in the block chooser. The vane shows at that position on the page.

Rich Text has no raw HTML, and the Embed field only takes oEmbed links. Use a slice.

1. In Slice Machine, create a slice VanePoll with a Key Text field vane_id.
2. Replace its generated component with the code below.
3. Push the slice and add it to your page type.

import type {SliceComponentProps} from '@prismicio/react'
import {Vane} from '@/components/Vane'

export default function VanePoll({slice}: SliceComponentProps<any>) {
  return (
    <section>
      <Vane id={slice.primary.vane_id} />
    </section>
  )
}

Did it work? Editors can add the VanePoll slice to a page. The vane shows where the slice sits.

Create a block model and allow it in your Structured Text or Modular Content field.

1. Create a block model VANE it poll (API key vane_poll) with a single-line string vane_id.
2. Allow it in your Structured Text field.
3. Add the block to your GraphQL query and render it with renderBlock.

import {StructuredText} from 'react-datocms'
import {Vane} from '@/components/Vane'

<StructuredText
  data={post.content}
  renderBlock={({record}) =>
    record.__typename === 'VanePollRecord' ? <Vane id={record.vaneId} /> : null
  }
/>

// and in your GraphQL query
content { value blocks { __typename ... on VanePollRecord { id vaneId } } }

In Structured Text, blocks can only sit between paragraphs, not inside one. That's fine for a vane.

Did it work? Editors can insert VANE it poll between paragraphs. The vane shows at that point.

Make a VanePoll model with a vaneId field and allow it as a block embed in your Rich Text field.

1. Create the VanePoll model with a single-line text field vaneId.
2. In your Rich Text field, enable embeds and allow VanePoll.
3. Query the embedded references and render them with a custom renderer that returns the Vane component.

Did it work? Editors can embed a VanePoll in the text. The vane shows at that point.

Builder.io has a Custom Code block that takes HTML, including scripts, so editors can paste the normal embed code.

1. In the visual editor, insert a Custom Code block where the vane should go.
2. Paste the embed code from the VANE it dashboard.
3. Publish.

For a tidier editor experience, register a custom component with a Vane ID input that renders the Vane component.

Did it work? The vane shows in the preview and on the published page.

Ghost is the easy one. Its HTML card is published exactly as written, so the normal embed code works with no developer needed.

1. In the post editor, type /html and choose HTML.
2. Paste the embed code from the VANE it dashboard.
3. Update or publish the post.

Email clients don't run scripts, so the vane won't appear in the newsletter version of a post. It shows on the web version. Add a line such as "Vote on the website" linked to the post.

Did it work? Open the post on your site. The vane shows where you put the card.

Decap, Tina, Keystatic, Pages CMS and others save Markdown files, and most site generators pass raw HTML in Markdown straight through. Paste the embed code on its own line.

1. Switch the editor to raw or source mode if it has one, and paste the embed code on its own line, with a blank line above and below.
2. Publish, and check the built page.
3. If the tag shows as text or disappears, your generator is stripping HTML. Hugo does this by default; the setting is below.

Twenty years taught us to roast light.

<script async src="https://vaneit.com/embed.js" data-vane="your-vane-id"></script>

Come and argue about it at the counter.

[markup.goldmark.renderer]
  unsafe = true   # Hugo drops raw HTML in Markdown without this

Some rich text editors remove tags they don't recognise. If yours does, add a custom component instead: Tina rich-text templates and Keystatic content components can both output the Vane placeholder.

Did it work? The vane shows on the built page where the line sits.