# Webflow Blog TOC
## Library Usage
To use this library, follow the steps below:
### Using with a CDN
1. **Add the script to your HTML**:
Include the library script in the `` tag of your HTML file using a CDN:
```html
```
2. **Prepare your HTML structure**:
- Select the Richtext Element and give it the `ss-toc-content-comp` attribute:
```html
```
- Select the container for the Table of Contents (TOC) and give it the required data attributes:
```html
```
3. **Initialize the TOC**:
The library will automatically generate the TOC for the container with the `ss-toc-comp` attributes. Ensure your headings (e.g., ``, ``) are inside the blog content container `ss-toc-content-comp`.
4. **Customize options (optional)**:
You can pass additional options to the script by adding `ss-option-*` attributes to the `ss-toc-comp` container. For example:
```html
```
- `ss-option-heading-selector`: Specify which headings to include (default: `h1, h2, h3, h4, h5, h6`).
- `ss-option-list-type`: Specify the list type (`ul`, `ol`, or `none`).
- `ss-option-item-active-class`: Add a custom class to the active TOC item.
- `ss-option-smooth-scroll`: Enable smooth scrolling (default: `false`).
- `ss-option-scroll-speed`: Set the scroll speed in milliseconds (default: `300`).
5. **Styling**:
Update custom styles in Webflow to the TOC container to match your website's design.