This functionality requires FramerAuth to be installed on your Framer website to work.

1. Mark as Complete Button

In this guide, you'll learn how to create a "Mark as Complete" button to add to your Framer site using FramerAuth. This will allow your users to mark an article as read or a video as watched for example. This requires a code component and an override.

Add the Component

Copy the component link below and paste the component into your Framer CMS Page.

https://framer.com/m/Lesson-Complete-N5tM.js

This component can be stylized however you'd like, just don't add more than two variants.

Configure the mark as complete properties

1. In your instance, set the component to be in the "completed" variant state by default

2. Connect the slug from the component to your slug variable from the CMS

3. Connect the withActionComplete override from the FramerAuth override file to the component instance

4. The link allows you to redirect to a certain page after the button is clicked, this is optional

2. Display a 'completed' icon

Adding the checkmark component

Copy the component link below and paste the component into a Framer CMS Collection List.

https://framer.com/m/Lesson-Complete-Icon-sIhC.js

This can also be stylized however you'd like.

Configure the checkmark component

1. Connect the slug from the component to your slug variable from the CMS

2. Connect the withIsLessonComplete override from the FramerAuth file to the component instance

Congratulations 🎉

You've successfully added the mark as complete feature to your Framer website. Should you encounter any issues or require further customization, reach out to our support team for assistance.