plugin-cmf

v0.2.1

Published

22 days ago

Plugin de avaliação de vagas da Cadê meu Feedback

Downloads

1,645

0High
0Medium
0Low

hubbe_marcos

CMF Plugin Installation and Usage Guide

Overview

The CMF Plugin allows you to integrate a feedback form into your website, enabling users to provide feedback on job descriptions. This guide will walk you through the updated installation and configuration process, ensuring seamless integration with your website while maintaining complete CSS and DOM isolation.

Installation

Step 1: Include the Plugin Script

Add the following script to your HTML file to include the CMF plugin. Ensure that this script is placed before the closing </body> tag to allow the DOM to load properly.

<script src="path/to/cade-plugin.js"></script>

Step 2: Add Meta Tags

Include the following meta tags in the <head> section of your HTML to configure the plugin. These meta tags provide essential configuration values that the plugin uses for initialization.

<meta name="cmf-client-secret" content="your-client-secret">
<meta name="cmf-base-url" content="your-base-url">
<meta name="cmf-foreign-id" content="your-foreign-id">
<meta name="cmf-role-title" content="your-role-title">

Parameters Explained:

cmf-client-secret: Your unique client secret for authentication with the CMF service.
cmf-base-url: The base URL path where the plugin is enabled on your website.
cmf-foreign-id: An identifier for the foreign entity, such as a specific job posting or role.
cmf-role-title: The title of the role or job posting that users will provide feedback on.

Step 3: Add Vacancy Title Element

To provide context for the feedback form, include an element with the cade-title-vacancy attribute in your HTML. This element should contain the title of the role or job posting you want users to provide feedback on.

<div cade-title-vacancy="Senior JavaScript Developer">Senior JavaScript Developer</div>

Important: The plugin relies on this element to display the role title within the feedback form. Ensure that this element is present on every page where you intend to use the feedback form.

Step 4: Initialize the Plugin

Initialize the plugin by calling the start method. This method can be invoked without parameters, in which case the plugin will use the values from the meta tags. Alternatively, you can pass the parameters directly to the start method if you prefer.

Using Meta Tags:

<script>
  CadePlugin.start();
</script>

Passing Parameters Directly:

<script> CadePlugin.start('your-client-secret', 'your-base-url', 'your-foreign-id'); </script>

Note: Passing parameters directly can be useful if you want to override the meta tag values or if you prefer configuring the plugin via JavaScript.

Usage

Meta Tags Configuration

The meta tags provide essential configuration for the CMF Plugin:

cmf-client-secret: The client secret used for authenticating requests to the CMF service.
cmf-base-url: The base URL path on your website where the plugin should be active.
cmf-foreign-id: An identifier for the specific job posting or role the feedback pertains to.
cmf-role-title: The title of the role/job posting, displayed within the feedback form.

Methods

The CMF Plugin class provides several methods to manage the feedback form and handle user interactions:

start(clientSecret, baseUrl, foreignId): Initializes the plugin with the provided parameters. If parameters are not provided, it will use the values from the meta tags.
Usage:
```
CadePlugin.start(); // Uses meta tags
// or
CadePlugin.start('your-client-secret', 'your-base-url', 'your-foreign-id'); // Uses provided parameters
```
toggle(): Toggles the visibility of the feedback form. This method is primarily used internally but can be invoked externally if needed.
Usage:
```
CadePlugin.toggle();
```

Example Usage

Here is a complete example of how to set up and use the CMF Plugin within your HTML page:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Job Feedback</title>

  <!-- Meta Tags for Plugin Configuration -->
  <meta name="cmf-client-secret" content="your-client-secret">
  <meta name="cmf-base-url" content="/jobs">
  <meta name="cmf-foreign-id" content="job-12345">
  <meta name="cmf-role-title" content="Senior JavaScript Developer">

  <!-- Optional: Include other head elements like stylesheets or fonts -->
</head>
<body>

  <!-- Vacancy Title Element -->
  <div cade-title-vacancy="Senior JavaScript Developer">Senior JavaScript Developer</div>

  <!-- Other content of your webpage -->

  <!-- Include the CMF Plugin Script -->
  <script src="path/to/cade-plugin.js"></script>

  <!-- Initialize the Plugin -->
  <script> // Initialize using meta tags
    CadePlugin.start();

    // Or initialize by passing parameters directly
    // CadePlugin.start('your-client-secret', '/jobs', 'job-12345'); </script>
</body>
</html>

Explanation:

Meta Tags: Provide the necessary configuration for the plugin.
Vacancy Title Element: Supplies the role title that the plugin displays.
Plugin Script: Includes the CMF Plugin JavaScript file.
Initialization Script: Calls the start method to initialize the plugin, either using meta tags or by passing parameters directly.

Troubleshooting

Common Issues

Plugin Not Displaying:
- Ensure Meta Tags Are Correct: Verify that all required meta tags are present and contain valid values.
- Check Vacancy Title Element: Ensure that an element with the cade-title-vacancy attribute exists on the page.
- Console Errors: Open the browser's developer console to check for any JavaScript errors that might prevent the plugin from initializing.
Error: "Não encontramos o nome da vaga. Por favor, insira o atributo 'cade-title-vacancy'."
- Cause: The plugin cannot find an element with the cade-title-vacancy attribute.
- Solution: Add an element with the cade-title-vacancy attribute containing the role title.
  Example:
```
<div cade-title-vacancy="Senior JavaScript Developer">Senior JavaScript Developer</div>
```
Feedback Submission Failing:
- Check Client Secret: Ensure that the cmf-client-secret meta tag contains a valid client secret.
- Network Issues: Verify that there are no network issues preventing the plugin from communicating with the CMF service.
- CORS Restrictions: Ensure that your server allows cross-origin requests if necessary.

Debugging Steps

Verify Element Presence:
- Use the browser's developer tools to confirm that the cade-title-vacancy element is present and correctly formatted.
Check Console Logs:
- Look for any error messages or warnings in the console that can provide insights into what might be going wrong.
Ensure Proper Script Loading:
- Make sure that the plugin script (cade-plugin.js) is correctly referenced and loaded without errors.

Best Practices

Secure Your Client Secret: Keep the cmf-client-secret confidential to prevent unauthorized access to the CMF service.
Responsive Design: Ensure that your website is responsive so that the feedback form displays correctly on all devices.
Regular Updates: Keep the plugin updated to benefit from the latest features, security patches, and improvements.
Accessibility Compliance: Continuously test and enhance the plugin's accessibility to provide an inclusive user experience.

Support

If you encounter issues not covered in this guide or need further assistance with the CMF Plugin, please reach out to our support team at [email protected].