Examples

Museum Template

<html lang="en">
  <head>
    <title>Touchpoint Sample HTML</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <script type="module">
      import { create, React, html } from "https://unpkg.com/@nlxai/[email protected]/lib/index.js?module";
      
      
      const MuseumExhibitCarousel = ({ data, conversationHandler }) => {
        const [selected, setSelected] = React.useState(null);
      
        return html`
          <Carousel>
            ${data.map((exhibit, index) => html`
              <CustomCard
                key=${index}
                selected=${selected === index}
                onClick=${() => {
                setSelected(index);
                conversationHandler.sendChoice(exhibit.id);
                }}
              >
                <CustomCardImageRow 
                  src=${exhibit.imageUrl} 
                  alt=${exhibit.name}
                />
                <CustomCardRow
                  left=${html`<BaseText faded><div/></BaseText>`}
                  right=${html`<BaseText>${exhibit.name}</BaseText>`}
                />
                <CustomCardRow
                  left=${html`<BaseText faded>Dates:</BaseText>`}
                  right=${html`<BaseText>Through ${exhibit.endDate}</BaseText>`}
                />
              </CustomCard>`
            )}
          </Carousel>
        `;
      };
      
      const MuseumExhibitDetails = ({ data, conversationHandler }) => {
        const detailedUrls = data.detailImageUrls;
        return html`
          <Carousel>
            <CustomCard>
              <CustomCardImageRow 
                src=${data.imageUrl} 
                alt=${data.name}
              />
            </CustomCard>
            ${detailedUrls.map((imageUrl) => html`
              <CustomCard>
                <CustomCardImageRow 
                  src=${imageUrl} 
                  alt=${data.name}
                />
              </CustomCard>`
            )}
          </Carousel>
          <BaseText faded>Dates</BaseText>
          <BaseText>Through ${data.endDate}</BaseText>
              
          <BaseText faded>Location</BaseText>
          <BaseText>${data.galleryLocation}</BaseText>
              
          <BaseText faded>About this exhibition</BaseText>
          <BaseText>${data.summary}</BaseText>
        `;
      };
      
      
      const touchpoint = await create({
        config: {
          applicationUrl: "REPLACE_WITH_APPLICATION_URL",
          headers: {
            "nlx-api-key": "REPLACE_WITH_API_KEY"
          },
          languageCode: "en-US",
          userId: "REPLACE_WITH_USER_ID"
        },
        colorMode: "dark",
        input: "text",
        theme: {"fontFamily":"\"Neue Haas Grotesk\", sans-serif","accent":"#AECAFF"},
        customModalities: { MuseumExhibitDetails, MuseumExhibitCarousel },
      });
      
    </script>
  </body>
</html>

Last updated