Getting started

div class="magic-writer-wrapper"
div id='magic-writer-element'

textarea name="note" id="CartNote" style="display:none;">{{ cart.note }}

.cart-wrapper {
     display: flex;
      gap: 50px;
   }

  .cart-wrapper table {
    height: fit-content;
  }


  @media only screen and (max-width: 750px) {
  .cart-wrapper {
    flex-direction: column;
    } 
  }

   .magic-writer-wrapper {
     display: flex;
       gap: 30px;
     flex-direction: column;
     justify-content: center;
     align-items: flex-end;
   }

@media only screen and (max-width: 750px) {
  .magic-writer-wrapper {
    align-items: center;
    } 
  }

script id='gifttaggScript' src="https://s3.eu-west-1.amazonaws.com/widget-prod.gifttagg.com/bundle.js" defer
 script type="text/javascript"
    /**
    * Gifttagg v3
    */
    const handleGenerateGiftnote = function (gifttagg,  magicWriter) {   
      var message = ""
        if(gifttagg !== undefined && magicWriter === undefined){
          message = gifttagg.firstName + ' ' + gifttagg.lastName + ' has sent you a very special video / voice message. To play, visit play.gifttagg.com & enter message code: ' + gifttagg.code
        } else if(gifttagg === undefined && magicWriter !== undefined){
           message = magicWriter.message
        } else if (gifttagg !== undefined && magicWriter !== undefined) {
           message = magicWriter.message + '\n\n' + gifttagg.firstName + ' ' + gifttagg.lastName + ' has sent you a very special video / voice message. To play, visit play.gifttagg.com & enter message code: ' + gifttagg.code
        }

      updateCartItems(message)

      return message
      }

    const config = {
      widget: {
        containerId: 'magic-writer-element',
        giftNoteId: 'CartNote',
        generateGiftnote: handleGenerateGiftnote
      },
      magicWriter: {
        giftNoteMaxChars: 400,
        magicWriterMaxChars: 300,
        maxGenerations: 10,
        homePage: {
          disabled: false,
          includeGiftNoteInWidget: true,
          generateButtonVisible: true,
          dividerVisible: true,
          gifttaggVisible: true,
        },
        formPage: {
          titleVisible: true,
          disableToField: false,
          disableFromField: false
        },
        theme: {
          accentColor: '#f4263e'
        },
        // overrides:{
        //   overrideWidth: '100%'
        // },
      },
      gifttagg: {
        functionality: {
          recordLaterEnabled: false
        },
        theme: {
          name: 'default'
        },
      }
    };

    
    var sdk;
    var gifttaggScript = document.getElementById('gifttaggScript');
    
    gifttaggScript.addEventListener('load', function() {
        sdk = gifttaggSDK.Build(config)
    });

    function openGiftTag() {
      sdk.gifttagg.open();
    }

    async function updateCartItems(giftMessage) {
      var cartContents = await fetch(window.Shopify.routes.root + 'cart.js')
      .then(response => response.json())
      .then(data => { return data });

      if (cartContents.items.length > 0) {
        var updateItems = [];
        cartContents.items.forEach(async (item, index) => {
          if (item.id != '42182325993645') { 
            await fetch(window.Shopify.routes.root + 'cart/change.js', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json'
              },
              body: JSON.stringify({'id': item.key, 'quantity': item.quantity, 'properties': {"Message": giftMessage} })
            })
            .then(response => response.json())
            .then(data => { return data });
          }
        });
      }
    }
   /script
   

generateButtonVisible: true,
dividerVisible: true,
gifttaggVisible: true,

{
  maxGenerations: number, // Number of free message generations
  giftNoteMaxChars: number, // Maximum characters for the gift note
  magicWriterMaxChars: number, // Maximum characters to send to Magic Writer
  homePage?: HomePageProps, // Properties for the home page
  formPage?: FormPageProps, // Properties for the form page
  theme?: {
    accentColor?: string // Accent color used throughout the widget
  },
  overrides?: {
    overrideWidth?: string // Override the default width
  },
  handlers?: {
    save?: (message?: string) => void // Handler for saving the message
  }
}

{
  disabled?: boolean, // Don't show the first page
  includeGiftNoteInWidget?: boolean, // Embed a text area into the widget
  placeHolderForEmbedGiftNote?: string, // Placeholder text in the embed text area
  generateButtonVisible?: boolean, // Generate message button visibility
  dividerVisible?: boolean, // Divider visibility
  gifttaggVisible?: boolean // Add Gifttagg video section visibility
}

{
  titleVisible?: boolean, // Title visibility
  disableToField?: boolean, // Disable "To" field
  disableFromField?: boolean, // Disable "From" field
  options?: OptionsProps // Options for tones, character styles, and writing styles
}

const options: OptionsProps = {
  tones: [
    { value: "tone1", label: "Tone 1" },
    { value: "tone2", label: "Tone 2" },
    { value: "tone3", label: "Tone 3" }
  ],
  characterStyles: [
    { value: "style1", label: "Style 1" },
    { value: "style2", label: "Style 2" },
    { value: "style3", label: "Style 3" }
  ],
  writingStyles: [
    { value: "writing1", label: "Writing 1" },
    { value: "writing2", label: "Writing 2" },
    { value: "writing3", label: "Writing 3" }
  ]
};

{
  embedded?: {
    embeddedContainerId: string // ID of the embedded container
  },
  functionality?: {
    recordLaterVideoCode?: string, // Video code for recording later
    recordLaterEnabled?: boolean // Enable recording later functionality
  },
  theme?: {
    name: string // Theme name
  },
  autoSubmitData?: {
    firstName: string,
    lastName: string,
    email: string
  },
  handlers?: {
    callback?: (code: string, firstName: string, lastName: string, email: string) => void, // Callback handler
    onClose?: () => void, // Handler for modal close
    onLoad?: () => void // Handler for modal load
  }
}