Skip to content

Instantly share code, notes, and snippets.

@zuzannamj
zuzannamj / slide-in-panel.html
Last active July 1, 2024 13:42
Slide-in panel on a CloudPage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slide-In Panel Example</title>
<style>
body { font-family: Arial, sans-serif; justify-content: center; align-items: center; height: 100vh; margin: 0; }
.slide-in-panel { position: fixed; left: -300px; top: 50%; transform: translateY(-50%); width: 300px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.2); transition: left 0.3s ease; padding: 20px; border-radius: 8px; border: 1px solid #888; }
.slide-in-panel.open { left: 0; }
@zuzannamj
zuzannamj / modal-dialog.html
Last active July 1, 2024 14:01
Modal dialog on a CloudPage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modal Dialog Example</title>
<style>
body { font-family: Arial, sans-serif; }
.modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); padding-top: 60px; }
.modal-content { background-color: #fefefe; margin: 5% auto; padding: 20px; border: 1px solid #888; width: 80%; border-radius: 8px; }
@zuzannamj
zuzannamj / toast-notification.html
Created June 30, 2024 11:56
Toast notification on a CloudPage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toast Notification Example</title>
<style>
body { font-family: Arial, sans-serif; }
/* Button styling to match the screenshot */
%%=TreatAsContent(HTTPGet('https://raw.githubusercontent.com/zuzannamj/data-views-app/main/index.html'))=%%
POST https://api.openai.com/v1/chat/completions
Content-Type application/json
Authorization Bearer {{API key}}
{
"model": "gpt-3.5-turbo",
"messages": [{"role": "user", "content": "here you tell ChatGPT what content to generate"}]
}
<script runat = "server" >
Platform.Load("Core", "1");
try {
var interest = "dogs"; //add your interest
var contentType = 'application/json';
var headerNames = ["Authorization"];
var headerValues = ["Bearer xxxx"]; //add your key
SELECT p.SubscriberKey
, c.OrderIDs
FROM [AllOrders] p
CROSS APPLY (
Select CAST('<x>' + REPLACE(p.OrderIDs,',','</x><x>') + '</x>' AS XML).value('/x[1]','nvarchar(max)') as OrderIDs1
UNION ALL
Select CAST('<x>' + REPLACE(p.OrderIDs,',','</x><x>') + '</x>' AS XML).value('/x[2]','nvarchar(max)') as OrderIDs2
UNION ALL
Select CAST('<x>' + REPLACE(p.OrderIDs,',','</x><x>') + '</x>' AS XML).value('/x[3]','nvarchar(max)') as OrderIDs3
UNION ALL
select
orders.SubscriberKey, orders.OrderID
from (
SELECT
a.SubscriberKey
, SUBSTRING(a.OrderIDs, 1, ISNULL(p1 - 1, LEN(a.OrderIDs))) OrderID
from AllOrders a
CROSS APPLY (select NULLIF(CHARINDEX(',', a.OrderIDs), 0)) b(p1)
%%[
ELSEIF RequestParameter("submittedOTP") == true THEN
SET @OTP = RequestParameter('OTP')
SET @email = RequestParameter("email")
/* check OTP against the DE */
set @rows = LookupOrderedRows("OTP", 1, "SentDate desc", "EmailAddress", @email)
if @rowCount > 0 then
%%[
IF RequestParameter("submitted") == true THEN
/* generate an OPT */
set @num1 = 1000
set @num2 = 9999
set @OTP = random(@num1, @num2)
/* send a triggered email containing the opt */