Comprehensive guide to install, configure, and customize the DevRated widget on all your projects.
DevRated is a lightweight and highly customizable widget that allows developers to collect user feedback on their projects. Whether it’s a website, web app, or mobile app, DevRated integrates easily and lets you gather valuable insights to improve your portfolio.
Just one line of code to integrate the widget into any project.
Tailor the widget’s appearance to your visual identity using CSS or the API.
A comprehensive dashboard to track and analyze user feedback.
Installing DevRated is simple and quick. Start by creating an account on our platform, then integrate the widget based on the type of project you’re developing.
// Step 1: Create an account on DevRated
// Log in at https://www.devrated.com
// Step 2: Retrieve your unique ID from the dashboard
// Example: 'dev-af245c9b8'
// Step 3: Integrate the script into your project
<script
src="https://www.devrated.com/widget.js"
data-dev-id="your-id">
</script>
<script
src="https://www.devrated.com/widget.js"
data-each-dev-id="dev-id-1, dev-id-2, dev-id-3"
data-position="bottom-right"
data-theme="auto">
</script>
Configuring DevRated is just as simple and quick.
The DevRated widget is highly configurable via data-* attributes in the script tag.
| Attribute | Description | Possible Values | Default |
|---|---|---|---|
| data-dev-id | Unique developer ID (required if data-each-dev-id is not used) | Alphanumeric string | - |
| data-each-dev-id | Comma or space separated list of developer IDs (overrides data-dev-id) | Alphanumeric strings separated by commas or spaces | - |
| data-position | Widget position on the screen | bottom-right, bottom-left, top-right, top-left, center | bottom-right |
| data-theme | Appearance theme | light, dark, auto | auto |
| data-delay | Delay before display (ms) | Integer | 5000 |
| data-title | Widget title | Text | Rate Your Experience |
Below are three ways to integrate the DevRated widget into your project. Choose the one that best fits your needs. Each example is tailored to a specific scenario.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DevRated Integration</title>
</head>
<body>
<h1>Welcome to our site</h1>
<!-- Integration of the DevRated widget using a single developer ID -->
<script
src="https://www.devrated.com/widget.js"
data-dev-id="your-id">
</script>
</body>
</html>
import React, { useEffect } from 'react';
const DevRatedWidget = () => {
useEffect(() => {
const script = document.createElement('script');
script.src = "https://www.devrated.com/widget.js";
// Use data-each-dev-id for multiple developers
script.dataset.eachDevId = "dev-id-1, dev-id-2";
script.dataset.position = "bottom-left";
script.dataset.theme = "light";
document.body.appendChild(script);
}, []);
return <div>Welcome to our React application</div>
};
export default DevRatedWidget;
<template>
<div>
Welcome to our Vue.js application
</div>
</template>
<script>
export default {
mounted() {
const script = document.createElement('script');
script.src = "https://www.devrated.com/widget.js";
// Multi-developer configuration:
script.dataset.eachDevId = "dev-id-1 dev-id-2";
script.dataset.position = "top-right";
script.dataset.theme = "auto";
document.body.appendChild(script);
}
};
</script>
Find answers to the most frequently asked questions about integrating and using our widget.