readme.md

Calendar Wrapper Plugin

Testing in standalone (uat)

• Navigate to: https://apps.uat.rokt.com/wsdk/plugins/calendar/index.html
• Open browser console and paste the contents of standalone.js
• Replace the calendarSrc property with the URL the calendar app is hosted on
  • By default it uses the "mock calendar" implementation designed to simulate the calendar
• Execute the code

Testing with the Web SDK

rokt-wsdk serve

This will launch the wsdk cli tool locally and proxy the web sdk. From there:

• Open your browser and navigate to http://localhost:3000
• In the placement response mock, copy/paste the mock in mocks/placement-response.json
• Replace the calendarSrc property with the URL the calendar app is hosted on
  • By default it uses the "mock calendar" implementation designed to simulate the calendar
• Hit launch at the bottom

placement-response.json

{
  "pageContext": {
    "roktTagId": "roktTagId",
    "pageInstanceGuid": "pageInstanceGuid",
    "pageId": "pageId"
  },
  "placements": [
    {
      "plugin": {
        "targetElementSelector": "body",
        "id": "1337",
        "name": "calendar",
        "url": "",
        "config": {
          "debug": true,
          "calendarSrc": "https://apps.uat.rokt.com/wsdk/plugins/calendar/mock-calendar/index.html",
          "calendarConfig": {
            "externalEventId": "2222",
            "subscriberId": "foobar@rokt.com",
            "email": "a@b.com",
            "mobile": "0466111222"
          }
        }
      },
      "placementConfigurables": {
        "Theme.Creative.Copy.FontFamily": "livenationsans",
        "Theme.Creative.Copy.FontSize": "12px",
        "Theme.Creative.Copy.FontWeight": "400",
        "Theme.Creative.Copy.Color": "black",
        "Theme.Placement.Heading.Content.Color": "yellow",
        "Theme.Placement.Header.Section.BackgroundColor": "blue",
        "Theme.Placement.Header.Section.FontFamily": "livenationsans",
        "Theme.Placement.Header.Section.FontSize": "16px",
        "Theme.Placement.Header.Section.FontWeight": "700",
        "Theme.PrimaryButton.Color": "white",
        "Theme.PrimaryButton.BackgroundColor": "lime",
        "Theme.PrimaryButton.FontFamily": "livenationsans",
        "Theme.PrimaryButton.FontSize": "12px",
        "Theme.PrimaryButton.FontWeight": "400",
        "Theme.SecondaryButton.Color": "yellow",
        "Theme.SecondaryButton.BackgroundColor": "black",
        "Theme.SecondaryButton.FontFamily": "livenationsans",
        "Theme.SecondaryButton.FontSize": "10px",
        "Theme.SecondaryButton.FontWeight": "400",
        "Theme.Placement.Footer.Section.Color": "black",
        "Theme.Placement.Footer.PrivacyPolicy.Link.Desktop.Color": "yellow",
        "Theme.Placement.Footer.Section.BackgroundColor": "purple",
        "Theme.Placement.Footer.Section.FontFamily": "livenationsans",
        "Theme.Placement.Footer.Section.FontSize": "11px",
        "Theme.Placement.Footer.Section.FontWeight": "400",
        "FooterOptions.ShowPoweredByRokt": "true",
        "FooterOptions.ShowRoktPrivacyPolicy": "true",
        "FooterOptions.ShowClientPrivacyPolicy": "true",
        "Copy.placement.footer.poweredByRokt.content": "Powered by Rokt",
        "Copy.placement.footer.roktPrivacyPolicy.content": "Read our policy",
        "Copy.placement.footer.roktPrivacyPolicy.link": "https://rokt.com/privacy",
        "Copy.placement.footer.clientPrivacyPolicy.content": "Company privacy policy",
        "Copy.placement.footer.clientPrivacyPolicy.link": "https://whoisme.com/privacy"
      },
      "fonts": [
        {
          "fontFamily": "livenationsans",
          "fontStyle": "normal",
          "fontWeight": "400",
          "src": [
            "url(https://roktcdn1.akamaized.net/bbw/content/fonts/livenationsans/regular/livenationsans-regular.woff2)format('woff2')"
          ]
        },
        {
          "fontFamily": "livenationsans",
          "fontStyle": "bold",
          "fontWeight": "700",
          "src": [
            "url(https://roktcdn1.akamaized.net/bbw/content/fonts/livenationsans/regular/livenationsans-bold.woff2)format('woff2')"
          ]
        }
      ]
    }
  ]
}

standalone.js

(() => {
  RoktPlugin.context.close.mock.setImplementation(() => console.log('Plugin Debug: Close Plugin'))
  RoktPlugin.error.raise.mock.setImplementation((details) => console.log('Plugin Debug: Raise Error:', details))
  
  RoktPlugin.config.next({
    calendarSrc: 'https://apps.uat.rokt.com/wsdk/plugins/calendar/mock-calendar/index.html',
    calendarConfig: {
      externalEventId: "2222",
      subscriberId: "foobar@rokt.com",
      email: "a@b.com",
      mobile: "0466111222",
    },
    debug: true,
  })
  
  RoktPlugin.theme.configurables.next({
    "Theme.Creative.Copy.FontFamily": "livenationsans",
    "Theme.Creative.Copy.FontSize": "12px",
    "Theme.Creative.Copy.FontWeight": "400",
    "Theme.Creative.Copy.Color": "black",
    "Theme.Placement.Heading.Content.Color": "yellow",
    "Theme.Placement.Header.Section.BackgroundColor": "blue",
    "Theme.Placement.Header.Section.FontFamily": "livenationsans",
    "Theme.Placement.Header.Section.FontSize": "16px",
    "Theme.Placement.Header.Section.FontWeight": "700",
    "Theme.PrimaryButton.Color": "white",
    "Theme.PrimaryButton.BackgroundColor": "lime",
    "Theme.PrimaryButton.FontFamily": "livenationsans",
    "Theme.PrimaryButton.FontSize": "12px",
    "Theme.PrimaryButton.FontWeight": "400",
    "Theme.SecondaryButton.Color": "yellow",
    "Theme.SecondaryButton.BackgroundColor": "black",
    "Theme.SecondaryButton.FontFamily": "livenationsans",
    "Theme.SecondaryButton.FontSize": "10px",
    "Theme.SecondaryButton.FontWeight": "400",
    "Theme.Placement.Footer.Section.Color": "black",
    "Theme.Placement.Footer.PrivacyPolicy.Link.Desktop.Color": "yellow",
    "Theme.Placement.Footer.Section.BackgroundColor": "purple",
    "Theme.Placement.Footer.Section.FontFamily": "livenationsans",
    "Theme.Placement.Footer.Section.FontSize": "11px",
    "Theme.Placement.Footer.Section.FontWeight": "400",
    "FooterOptions.ShowPoweredByRokt": "true",
    "FooterOptions.ShowRoktPrivacyPolicy": "true",
    "FooterOptions.ShowClientPrivacyPolicy": "true",
    "Copy.placement.footer.poweredByRokt.content": "Powered by Rokt",
    "Copy.placement.footer.roktPrivacyPolicy.content": "Read our policy",
    "Copy.placement.footer.roktPrivacyPolicy.link": "https://rokt.com/privacy",
    "Copy.placement.footer.clientPrivacyPolicy.content":
      "Company privacy policy",
    "Copy.placement.footer.clientPrivacyPolicy.link":
      "https://whoisme.com/privacy",
  });
  
  RoktPlugin.theme.fonts.next([
    {
      fontFamily: "livenationsans",
      fontStyle: "normal",
      fontWeight: "400",
      src: [
        "url(https://roktcdn1.akamaized.net/bbw/content/fonts/livenationsans/regular/livenationsans-regular.woff2)format('woff2')",
      ],
    },
    {
      fontFamily: "livenationsans",
      fontStyle: "bold",
      fontWeight: "700",
      src: [
        "url(https://roktcdn1.akamaized.net/bbw/content/fonts/livenationsans/regular/livenationsans-bold.woff2)format('woff2')",
      ],
    },
  ]);
})();