A Vue.js single-page app to create, configure, and display marketing popups.

More specifically the popups that can be created have a display frequency setting (i.e days/weeks/months denoting how often the popup will be displayed) and can include some or all of the following traits:

• Open with a timer
• Open after scrolling x% of the page
• Open with Exit-intent tracking

The marketing popup is implemented as a Vue.js component in a way that multiple instances can be dropped on the same page.

The frontend is created with Vue.js, Vue Router, Vuex, axios, and Bootstrap.

The API is created with Lumen micro-framework (PHP - MySQL).

Configuration: This is the view that is used to create edit and delete the popups. Up to 3 popups can be created.

Marketing page: This is the sample page that is used to display the popups created in the configuration view.

Some notes

• Popups use localStorage to store data about how often they can be displayed. After editing a popup this "frequency" setting gets reset.
• Popups can also open "manually" when bound into certain links on the page.

The app gets deployed using GitHub actions and you can view it here.

• Create a new Db on your MySQL server.
• Import the .sql file found in the root of this repo into the newly created Db.

The root directory of this repo contains a .env.example file. You should rename the .env.example file to .env and fill in the APP_URL and Db connection details.

composer install

npm install

npm run serve

npm run build