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

npm install @inspirer-dev/hero-widget-cta-button

or

yarn add @inspirer-dev/hero-widget-cta-button

From source

1. Clone this repository
2. Install dependencies:

   yarn install

3. Build the plugin:

   yarn build

Usage

1. Add to your Strapi plugins

In your Strapi project's config/plugins.js or config/plugins.ts:

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:

{
  "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:

{
  "type": "external-link",
  "value": "https://example.com"
}

Or for relations:

{
  "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

# Install dependencies
yarn install

# Build for development
yarn build

# Watch for changes
yarn watch

# Verify the plugin
yarn verify

Testing

# 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