🎤 Builder Talk: The Story Behind Lady Gaga’s Digital Experience – Register now

Adding inline variables/short-codes in a rich text editor and customizing sales offers in Sanity

6 replies
Last updated: Jan 25, 2022
Hi! Is it possible to add an inline variable/short-code in a rich text editor?
Jan 24, 2022, 10:07 AM
Hi, Ash and thank you for the reply! 😃
The annotations looks to be a perfect fit here
😄
Ideally it would come from an external API. My idea is that we are going to generate a sales offer on a webhook, then someone on the sales team can go in to the generated sanity page and customize it to their needs.

These variables should in ideally not be editable, but possible to move around. (not sure if this is possible with the annotations)

I think this would be a rather unconventional way in Sanity, but being able to add some types of variables like this would be really cool.

When you ask where the values comes from, do you have any additional input on ideas here?
Jan 24, 2022, 10:41 AM
Thanks for the info! If you know all of the values when you create the document in the webhook handler, you can store them in the document itself. You can make these fields hidden and/or read-only (https://www.sanity.io/docs/schema-types#hidden-57ac9e4a350a ) to prevent them being changed.
Then, when you render the block content in the frontend, you could substitute each annotation with the corresponding field from the document.

This will allow the user to insert a token in any position in the block text (even multiple times), and have it dynamically converted to the value in the frontend. By storing all of the values in the Sanity document itself, you don't have to worry about stitching multiple APIs together when you render the page.

Is that viable for your use case?
Jan 24, 2022, 1:42 PM
Thank you both for the good pointers here! I will have to fiddle around to see what would work the best for us. I saw this video https://youtu.be/dt5K6gHGpr0?t=567 of you
user Y
where you explain the inline blocks. I did not know those existed, but these looks perfect for the job! If it is possible to combine the inline block with the read-only fields as
user E
suggests, I think that might be the best solution to my use case 😄 Thanks a ton and keep up the good work you two! 💯
Jan 25, 2022, 10:31 AM
I created an hidden array(offerVariables) in my document where I plan to add these selectable variables when creating the document from the hook.Then I created an inline-block with type reference. The "reference to" is a type of "offerVariable"(this is just a string).

My only problem now is that the inline-block reference dropdown is not populated. This is probably because I have not fully understood how to reference to the current document's array "OfferVariables". - Is this even possible?

How can I make the inline-block reference dropdown hold a list of items from an array inside the currently editing document?
😅I'm a newbie to Sanity, so please correct me where I'm wrong in my thinking.

Thank you!
PS: offerVariables is not hidden in the image below due to debugging.
Jan 25, 2022, 1:33 PM
After further investigation, I figured out that you can only reference documents. This would not work in my use case due to an insane amount of documents as each variable would be a document(?)
I found a workaround where I created a custom input component to be used instead of a reference in the inline-block.
The custom input component then displays a select that gets populated via the document itself:
https://www.sanity.io/docs/custom-input-widgets#1f69be67cfe0
Works like a charm!
Thank you guys a lot for pushing me the right way
🙌
Jan 25, 2022, 3:00 PM
That is awesome, thank you for sharing your solution!
Jan 25, 2022, 3:03 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
Rendering nested block contentJan 18, 2021
Warning: Data for Page Exceeds the Threshold of 128 kBAug 17, 2022
List Arrays - Is it Possible to Fill a List Array Within a Schema Asynchronously?Mar 16, 2021
Custom Document Views - Is it Even Possible to Use the Structure Builder?Apr 21, 2022
TypeError: Cannot Read Properties of Null (Reading 'jsonType')Sep 28, 2022
Error in custom validation rule for schema in Slack threadAug 18, 2023
GraphQL query resolving references on a _raw field in GatsbyMay 17, 2022
How to populate a list of values in a Sanity schema using a separate fileSep 6, 2021
How to fetch an array of images using groq in Sanity.ioMay 21, 2023
Is there a way to write a groq query that checks if a boolean is true, and if so, returns an array of referenced documents?...Feb 1, 2021

Related contributions

Turbo Start Sanity
- Template

The battle-tested Sanity template that powers Roboto Studio's websites

Go to Turbo Start Sanity

Schema UI - Next.js Sanity Starter
- Template

A Next.js starter template with Next.js 15, Tailwind CSS, shadcn/ui, and Sanity CMS with Live Editing. Get production-ready React components with matching Sanity schemas and queries. Build dynamic pages faster while keeping full control over customization.

Serge Ovcharenko
Go to Schema UI - Next.js Sanity Starter

The Swaddle
- Made with Sanity

A new brand identity to represent a more mature company, to signify The Swaddle’s evolution from publisher to production house, combined with an easier to navigate platform that can surface multiple content types - drawing readers through The Swaddle’s content offering.

Nightjar
Go to The Swaddle