Jump to content

[FYI] Pop up on first login

Recommended Posts

This use case will have the following parts:

- Landing DataPage. This is the homepage that your user will go to once they log in.
- Yes/No field in the User table. This will serve as a marker if a user logged in.
- Single Record Update DataPage that will serve as the Pop-up window.
- A new Localizationthat will be used in the Single Record Update DataPage.

Configuring the POP_UP DataPage
- Create a new Single Record Update DataPage and change its DataSource to your Users table.
- Configure "Record Identification" by picking the the unique ID in your Users table.
- Add the Yes/No field to your webform.
- Create an HTML BLOCK that will serve as your pop up message.
- Configure your Yes/No field to be "hidden" and check  "On load, receive: yes".
- Add a Header and Footer in your DataPage.
- In the footer, disable HTML editor and put the following script:

<script type="text/javascript">
document.addEventListener('BeforeFormSubmit', function(event) {

Edit your Landing DataPage
- Once you have configured your basic Authentication and the pop up DataPage. Add the following code in the header and footer of your Actual DataPage.


body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 5%; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 60%;
  height: 70%;

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;

.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;


<div id="myModal" class="modal">
<div class="modal-content">
    <iframe  name="Acknowledgement_Letter" title="Acknowledgement_Letter" src="<PUT_YOUR_POP_UP_DATAPAGE_URL_HERE>" frameborder="0" style="width: 100%; height: 100%;">Sorry, but your browser does not support frames.</iframe>

// Get the modal
var modal = document.getElementById("myModal");

document.addEventListener('DataPageReady', function (event) {
if('[@field:firstlogin_checker]' == 'No'){
  modal.style.display = "block";


- In the footer, change <PUT_YOUR_POP_UP_DATAPAGE_URL_HERE> with the deploy code of your pop-up Datapage. Dont forget to add the parameter for your unique ID.

For example: [DATAPAGE_URL]?email=[@authfield:email]

Localization of the pop-up DataPage:

- Create a new Localization.
- Under Forms/Details Pages>Buttons. Click the "Update" row.
- Under the Custom text, change the current value to "I accept" or any acknowledgement statement.
- Hit save and apply this localization to your pop-up DataPage. 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...