Overlay / Popup / Modal window

I’ve searched through the community but can’t find anything.

Is there a way to automatically have a modal window / popup without it being trigger by an action?

I want to display a welcome message when customers first sign in and have a close button on this screen. This will trigger an action for a Welcome Email so I need it to be designed in this way.

I don’t think there is any way to trigger an overlay without an action, but you could use tab visibility to get a similar effect. That is, have all tabs except one hidden by default, show your welcome message on that tab, and then use the button action to both trigger the email and set a column value in the user profile that reverses the visibility of all tabs.

You can create an HTML window to get the same result… use the template column and the visibility condition.

What do you mean by HTML window? Using Rich text?

yes

Do you have a sample script you are willing to share?

I can write the code for you if you show me an example of how it should look like

Just a simple modal box saying Welcome (I can change the text) with a close button. But the close button needs to trigger a glide action.

ok, give me 10 min

1 Like

Use in the rich text component, and add action to it… like set the USC column with any value, then set the visibility if this column is empty.

Copy this code:

<div style="
position:absolute;
z-index:22;
text-align:center;
color:steelblue;
font-size:50px;
line-height:100px;
font-family: poppins, serif;
top:0px;
right:15px;
width:350px;
height: 200px;
padding:0px;
border:solid 1px;
border-radius: 5px;
box-shadow: 0px 0px 10px;">
<b>Welcome</b>

<span style="
position:relative;
top:20px;
text-align:center;
color:grey;
font-size:17px;
font-family: poppins, serif;
cursor: pointer;
padding:6px 15px;
border:solid 0px grey;
border-radius: 8px;
box-shadow: 0px 0px 9px grey;"><b>CLOSE</b>
</span>
</div>

Duplicate this code to create a button to place inside … if you need it

thanks Uzo but this isn’t working so great. it sits behind the text. also - how is the action triggered?

image

Can I see what you did? Where did you paste it?

I’ve fixed the postion but moving the component to the bottom and repositioning it with the top and bottom settings. Can you just show me how to close it?

use visibility condition, and custom action

yes but where’s the button to click? I don’t understand that part

the whole window is a button :wink: unless you want a separate one, you split my code into two rich text components…
Copy my code again… I updated it.

Gotha - thanks for your help. Makes sense now

1 Like

Hi Uzo

This is pretty neat stuff. Please can you help me with a similar code if I want to replicate this with an image instead?

Thanks

Yes, no problem.