@carsy/task-completion-survey-banner
Advanced tools
Use this when you have an import/export system setup.
import load from "@carsy/task-completion-survey-banner";
// writes html into #pl--task-completion-survey-banner
load();
Use this when you have a vue setup that handles SFC using vue-loader.
<template>
<TaskCompletionSurveyBanner project="ipfs" />
</template>
<script>
import TaskCompletionSurveyBanner from "@carsy/task-completion-survey-banner/src/index.vue";
export default {
components: { TaskCompletionSurveyBanner }
}
</script>
Use this when you don't have an import/export system setup.
<head>
<script
src="https://unpkg.com/@carsy/task-completion-survey-banner"
async
onload="window.loadTaskCompletionSurveyBanner()"
></script>
</head>
<body>
<!-- Banner will be rendered here -->
<div id="pl--task-completion-survey-banner" data-project="ipfs"></div>
</body>
Note: to avoid page load content shifting, add height and width to the element.
Parameters can be used to customize the banner. The default values can be seen here. When using vue component, simply pass the parameters to the component as props:
<template>
<TaskCompletionSurveyBanner
project="ipfs"
url="https://formurl.com"
...
/>
</template>
Or, using the html method directly:
<div
id="pl--task-completion-survey-banner"
data-project="ipfs"
data-url="https://formurl.com"
>
</div>
projectProject id used to determine the saved form url from here, as well as apply default styles that better match the project's website.
urlForm url that the CTA will link to.
titleTitle to be rendered on the banner.
textDescription text to be rendered on the banner.
linkTextThe CTA's link text to rendered.
iconOverride the icon on the left side with an inline svg string.
To disable the icon and hide it use false.
showAfterDaysHow many days need to pass for the banner to be shown again after it has been closed or clicked by the user.
No project specific styles are in place now, but customizing the banner is possible:
You can use css variables to customize simple css properties of the banner. Declare the variables using the main element id:
#pl--task-completion-survey-banner {
--transition: 300ms ease;
--color: #444;
--font-size: 1.1rem;
--font-family: inherit;
--padding: 1.562rem 2.5rem 1.562rem 1.75rem;
--margin: 1rem;
--background: #d5ecee;
--border-radius: 0.1rem;
--icon-size: 3rem;
--cta-background: #3e9096;
--cta-border-radius: 0.1rem;
--cta-color: #fff;
--cta-hover-opacity: 0.3;
--cta-hover-background: #fff;
--cta-hover-color: #ccc;
}
You can also override any styles using the following classes:
pl--task-completion-survey-banner--content
pl--task-completion-survey-banner--left
pl--task-completion-survey-banner--right
pl--task-completion-survey-banner--title
pl--task-completion-survey-banner--text
pl--task-completion-survey-banner--link
pl--task-completion-survey-banner--close-button
If you want to create a framework specific component, you can use this:
import render, { context } from '@carsy/task-completion-survey-banner/src/render.js'
import '@carsy/task-completion-survey-banner/src/index.css'
The render function accepts the rendering properties documented above as an object, and it returns the html as a string to be rendered onto any html element you want.
The context object provides the setup function that you can use to call after your app is mounted/ready. It receives an object with the config parameters.
Example: The built-in vue component.
npm install
npm run release
FAQs
Task completion survey banner
We found that @carsy/task-completion-survey-banner demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."