@inspirer-dev/hero-widget-cta-button
Version:
A custom field plugin for Strapi v5 that provides a CTA button selector with different action types (external link, internal link, case, article, copy link, copy nickname).
187 lines (129 loc) • 4.03 kB
Markdown
# Hero Widget CTA Button Plugin
A custom field plugin for Strapi v5 that provides a CTA button selector with different action types. This plugin allows content creators to configure CTA buttons with various action types including external links, internal links, cases, articles, copy link, and copy nickname functionality.
## Features
- **Multiple Action Types**: Support for 6 different CTA button action types:
- External Link: Link to external URLs
- Internal Link: Link to internal pages
- Case: Link to specific cases in your database
- Article: Link to specific articles in your database
- Copy Link: Copy a specific link to clipboard
- Copy Nickname: Copy nickname functionality
- **Dynamic Forms**: Conditional forms that appear based on the selected action type
- **Relation Support**: Built-in support for case and article relations
- **Internationalization**: Support for multiple languages (English and Russian included)
- **TypeScript Support**: Full TypeScript support for better development experience
## Installation
### From npm
```bash
npm install @inspirer-dev/hero-widget-cta-button
```
or
```bash
yarn add @inspirer-dev/hero-widget-cta-button
```
### From source
1. Clone this repository
2. Install dependencies:
```bash
yarn install
```
3. Build the plugin:
```bash
yarn build
```
## Usage
### 1. Add to your Strapi plugins
In your Strapi project's `config/plugins.js` or `config/plugins.ts`:
```javascript
module.exports = {
// ... other plugins
"hero-widget-cta-button": {
enabled: true,
},
};
```
### 2. Add to your content type
In your content type schema, add the custom field:
```json
{
"ctaButton": {
"type": "customField",
"customField": "plugin::hero-widget-cta-button.cta-button"
}
}
```
### 3. Configure the field
The plugin provides a dropdown with the following options:
- **External Link**: Requires a URL input field
- **Internal Link**: Requires a path input field
- **Case**: Provides a dropdown to select from available cases
- **Article**: Provides a dropdown to select from available articles
- **Copy Link**: Requires a URL input field for the link to copy
- **Copy Nickname**: No additional configuration needed
## Data Structure
The plugin saves data in the following JSON format:
```json
{
"type": "external-link",
"value": "https://example.com"
}
```
Or for relations:
```json
{
"type": "case",
"caseId": "case-document-id"
}
```
## API Requirements
The plugin expects the following API endpoints to be available:
- `GET /api/cases?populate=*` - For fetching cases
- `GET /api/articles?populate=*` - For fetching articles
Make sure your Strapi instance has these content types configured and accessible.
## Development
### Prerequisites
- Node.js (v18 or higher)
- Strapi v5.x
- TypeScript
### Building the plugin
```bash
# Install dependencies
yarn install
# Build for development
yarn build
# Watch for changes
yarn watch
# Verify the plugin
yarn verify
```
### Testing
```bash
# Type check frontend
yarn test:ts:front
# Type check backend
yarn test:ts:back
```
## Configuration
The plugin works out of the box with minimal configuration. The main configuration is done through the field options when adding it to your content type.
## Internationalization
The plugin includes translations for:
- English (en)
- Russian (ru)
To add more languages, create translation files in the `admin/src/translations/` directory.
## Contributing
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
## License
MIT
## Support
For support, please open an issue on the GitHub repository or contact the maintainers.
## Changelog
### v1.0.0
- Initial release
- Support for 6 different action types
- TypeScript support
- Internationalization support
- Dynamic conditional forms