Procedure for Posting CAS Insights Articles

Objective

This SOP outlines the step-by-step process for posting CAS Insights articles to ensure consistency and quality in publication.

Key Steps

1. Accessing the Draft Article 0:01

• Start by clicking on the SharePoint link to access the CAS Insights articles.
• Navigate to the section labeled 'Insights article' and select 'Draft'.

2. Creating a New CAS Insights Post 1:03

• In Webflow CMS, go to 'CAS Insights' and click on 'New CAS Insights'.
• Enter the post title in the designated field.

3. Editing the Slug 1:28

• Edit the slug to make it shorter, using tools like Claude or customizing it manually.

4. Obtaining the Feature Image 2:06

• Request the Getty image from designers Mariah or Tammy.
• Ensure the image is downloaded and uploaded to the brand folder.

5. Optimizing the Image 2:50

• Use TinyPNG to convert the image to AVIF format.
• Download the optimized image for upload.

6. Adding Alt Text 3:13

• Create descriptive alt text for the image, using an LLM if necessary.

7. Filling SEO Information 3:36

• Set the SEO title to match the post title.
• Update the meta description as needed.

8. Writing the Article Preview 3:54

• Write a summary for the article preview that will appear on the main CAS Insights Index page.

9. Copying the Post Body 4:14

• Copy the entire body of the article from the Word document, including images, and paste it into Webflow.

10. Formatting Headings 4:33

• Remove any unwanted heading tags (e.g., h3, h2) from the titles and format them according to the guidelines.

11. Setting the Publish Date 5:10

• Enter the publish date as specified, typically on Wednesdays or Fridays.

12. Removing Unnecessary Features 5:20

• Remove the table of contents feature if it is not needed.

13. Categorizing the Article 6:14

• Select the appropriate category for the article, such as 'emerging science'.

14. Adding Author Information 6:34

• Choose the author from the list or add a new author using the plus button.

15. Including Teaser Text 7:05

• Write the teaser text that will appear on the main page.

16. Adding Call to Action (CTA) Button 7:15

• If applicable, add a CTA button text and URL.

17. Handling Resource Buttons 7:30

• Add resource button text and URL if needed.

18. Creating Tables 8:02

• Use predefined classes in Webflow for tables.
• Generate table code using an LLM and paste it into the custom code area.

19. Previewing the Article 9:12

• Check the article on the front end to ensure everything appears correctly.

20. Publishing the Article 10:06

• Once all steps are completed and reviewed, publish the article.

Cautionary Notes

• Ensure all images are properly optimized to avoid slow loading times.
• Double-check all links and text for accuracy before publishing.

Tips for Efficiency

• Use LLM tools for generating alt text and table code to save time.
• Keep a checklist of common tasks to streamline the posting process.

Link to Loom

https://loom.com/share/a3358138da354fbbaee7a08ac5bd5738

Inline Callout Box – Implementation Guide

Use this callout style to link readers to relevant CAS solutions without disrupting the reading flow. It's best for quick "learn more" moments mid-article.

When to Use

• Linking to a single solution that's directly relevant to the paragraph above
• Providing a subtle nudge without heavy visual emphasis
• Mid-article callouts (for end-of-article, consider the Multi-Link Card style instead)

How to Add to a Blog Post in Webflow

Step 1: Add an Embed Element

1. In the Webflow Designer, open your blog post or Rich Text field
2. Click the + icon to add a new element
3. Select Embed (under Components)
4. Place it where you want the callout to appear

Step 2: Paste the Code

Copy and paste the callout code template into the embed. See the inline callout template in the design system for the full code snippet.

Step 3: Customize the Content

Replace the bracketed placeholders: [YOUR BOLD TEXT] with the hook phrase, [YOUR SUPPORTING TEXT] with brief context, [YOUR LINK TEXT] with the CTA, and [YOUR-URL-PATH] with the relative URL path.

Step 4: Set the URL Path

Important: Use only the path after cas.org — do not include the full URL.

✅ Correct: /solutions/cas-scifinder-discovery-platform/cas-scifinder

❌ Incorrect: https://www.cas.org/solutions/cas-scifinder-discovery-platform/cas-scifinder

This ensures links work correctly across staging and production environments.

Writing Tips

• Bold text: Frame as a question or statement that resonates with the reader's challenge
• Supporting text: Keep it to one sentence; mention the solution name and key benefit
• Link text: Use action verbs — "Explore," "See How," "Learn More About"
• Placement: Position after a paragraph that naturally leads into the solution topic

Troubleshooting

Callout not displaying: Make sure you saved and published the page, and check that the embed code wasn't accidentally modified.

Fonts look different: The callout inherits fonts from the site. If it looks off, check that the page is using the standard CAS template.

Link not working: Verify you're using a relative path starting with / and test by appending it to https://www.cas.org in your browser.