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
- In the Webflow Designer, open your blog post or Rich Text field
- Click the + icon to add a new element
- Select Embed (under Components)
- 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.