@typeface-ai/typeface-embed-react NPM

React SDK for Typeface Embed

We offer two integration approaches to embed Typeface into your website: 1) an iframe based approach for browsers(Chrome, Edge) with more permissive 3rd party cookie policy (which allows using Typeface in iframe), and 2) a popup based approach for browsers (Safari, Firefox etc) disabling 3rd party cookies by default.

The SDK also provides a utility method to detect which approach should be used. Please see a complete example below.

Sample usage

See below for a sample integration for React apps to use the embed plugin.

import React, {useState} from 'react';
import {
  TypefacePluginPopUp,
  TypefacePluginIFrame,
  shouldUsePopUpWindow
} from "@typeface-ai/typeface-embed-react/lib/esm";
import {
  TypefaceEmbedIDP,
  TypefaceEmbedOutputFormat,
  TypefaceEmbedUseCase
} from "@typeface-ai/typeface-embed-react/lib/esm/model";

export const App = () => {
  const [showDialog, setShowDialog] = useState(false);
  // the utility method to detect which approach to use based on browser version
  const [usePopUp, ] = useState(shouldUsePopUpWindow());
  
  const plugInParams = {
    // identity provider of the embed use case
    idp: TypefaceEmbedIDP.Okta,
    // sign on url of if use 3rd party IDP
    signOnUrl: 'IDP sign on url here',
    // typeface use case of this embed experience
    useCase: TypefaceEmbedUseCase.JobPost,
    // identify the app using the SDK (required)
    sourceApp: 'appName',
    // use case parameters here
    parameters: {
      JobTitle: 'Senior Product Manager',
      JobFamily: 'Product Management',
      JobLevel: 'Advanced (Professional IC)',
      CompanyName: 'Typeface',
      IncludeJobSpecialty: true,
      JobSpeciality: "Computer Vision",
      JobSpecialityDescription: "Computer vision engineers collect data to advance the ability of computers to solve problems by making sense of images.",
    },
    // optional: auto generate the content with the input parameters, default is false
    autoGenerate: true,
    // optional: label of apply button, default to "Apply"
    applyButtonName: 'Apply',
    // call back when apply button is clicked
    onApply: (content: any) => {
      // callback when apply button is clicked
    },
    // optional: label of cancel button, default to "Cancel"
    cancelButtonName: 'Cancel',
    // call back when apply button is clicked
    onCancel: () => setShowDialog(false),
    // height of typeface embed box. For the current version, keep the width
    // of the embed box to 700px for the best experience.
    height: 700,
    // optional: output format, default to html
    // if html: content will be in html string
    // if json: content will be in json string formatted defined below
    outputFormat: TypefaceEmbedOutputFormat.JSON,
  }

  // the callback when buttons are clicked to trigger Typeface plugin
  const onTriggerTypefacePlugin = () => {
    if (usePopUp) {
      // the method to trigger Typeface plugin in popup window
      TypefacePluginPopUp(pluginProps)
    } else {
      // the state variable to display Typeface plugin in iframe
      setShowDialog(true);
    }
  }
  
  return <>
    <button onClick={onTriggerTypefacePlugin}>Trigger Typeface Plugin</button>
    {!usePopUp && <Dialog open={showDialog}>
      <TypefacePluginIFrame {...plugInParams} />
    </Dialog>}
  </>
}

Styling

Typeface window's height and width can be adjusted using the styles parameter

{
  styles: {
    height: 800,
    width: selectedUsecase === TypefaceEmbedUseCase.TPIChat ? 500 : 1200,
  }
}

Images

Generate Images using Image usecase.

{
  parameters: {
    prompt: "Stunning shot of Black Coffee and coffee beans on a wooden table.",
    width: 512,
    height: 512
  }
}

Generative Refine

Use Typeface's Generative Refine capabilities on existing content by upload the content onto Typeface canvas.

{
  parameters: {
    contentToRefine: "<h1>Senior Product Manager at Typeface</h1><h2>Overview</h2><p>Typeface is seeking a highly skilled and experienced Senior Product Manager to join our dynamic team. As a Senior Product Manager, you will play a pivotal role in driving the success of our company by overseeing the development and launch of innovative products. You will collaborate with cross-functional teams to define product requirements, conduct market research, and develop strategies to meet customer needs. The successful candidate will have a strong background in product management, excellent leadership skills, and a passion for delivering high-quality products to our customers.</p>"
    contentType: GenerativeRefineContentType.HTML
  }
}

Templates

Typeface offers templates to generate content for various use-cases. Use the SDK to be able to generate content using the available template choices.

// Generate a Job Post
{
  parameters: {
    template: TemplateType.JobPost,
    parameters: {
      JobTitle: "Senior Product Manager",
      JobFamily: "Product Management",
      JobLevel: "Advanced (Professional IC)",
      CompanyName: "Typeface",
      IncludeJobSpecialty: true,
      JobSpeciality: "Computer Vision",
      JobSpecialityDescription: "Computer vision engineers collect data to advance the ability of computers to solve problems by making sense of images.",
      OutputSchema: {
        fields: [
          {
            contentType: "Text",
            description: "Overview about the job role and the company.",
            name: "overview",
            title: "Overview"
          },
          {
            contentType: "Text",
            description: "Standard equal opportunity statement.",
            name: "equal_opportunity_statement",
            title: "Equal Opportunity Statement"
            default: "Typeface is an equal opportunity employer. We are committed to creating a diverse and inclusive environment for all employees."
          },
          {
            contentType: "List",
            description: "Write good reasons to join us, about company's mission and culture.",
            name: "minimum_qualifications",
            title: "Minimum Qualifications"
          }
        ],
        header: "This is Job description header",
        version: "1.0"
      }
    }
  }
}
// Generate a Blog Post
{
  parameters: {
    template: TemplateType.BlogPost,
    parameters: {
      Name: "Generative AI",
      Content: "Describe various applications of generative AI",
      StyleName: "Professional",
      ImageDescription: "Human brain in a computer, stunning shot."
    },
  }
}

// Generate a post for Celebrations
{
  parameters: {
    template: TemplateType.CelebrationPost,
    parameters: {
      Title: "Celebrating September Birthdays and Anniversaries",
      Goal: "Wish employees a happy anniversary and birthday, support their commitment to the company. And express well wishes for the year ahead",
      StyleName: "Professional",
      ImageDescription: "Balloons and confetti to celebrate employee birthdays and anniversaries, highly detailed, warm tones."
    },
  }
}

// Generate an Email
{
  parameters: {
  template: TemplateType.Email,
  parameters: {
    Purpose: "Request for a new feature",
    Context:
      "Typeface templates have been extremely useful. We would like to have new capabilities around collaboration",
    },
  }
}

// Generate Images in Image Studio
{
  parameters: {
    template: TemplateType.ImageStudio,
    parameters: {
      InputPrompt: "Stunning shot of Black Coffee and coffee beans on a wooden table."
    }
  }
}

// Use TextBlend parameter
{
  parameters: {
    template: TemplateType.TextBlend,
    parameters: {
      Action: TextBlendActionTypes.Summarize,
      IsContentSourceUri: true,
      ContentUri: "https://blog.typeface.ai/major-typeface-product-update-for-instant-ai-product-photography-and-audience-personalized-content/",
      StyleName: "Professional",
    }
  }
}

// Use Google ad 
{
  template: TemplateType.GoogleAd,
  autoGenerate: false,
  parameters: {
    ProductName: "Cecilie apple juice",
    DisplayURL: "juice.com",
    ProductContext: "Fresh apple juice",
    StandoutCharacteristics: "organic apple juice",
    KeyWords: "apple juice"
  }
}

// Use Google Responsive Ad
 {
  template: TemplateType.GoogleResponsiveAd,
  autoGenerate: false,
  parameters: {
    BusinessName: "Cecilie apple juice",
    DisplayURL: "juice.com",
    Goal: "promote apple juice",
    StandoutCharacteristics: "Fresh apple juice"
  }
}

// 

// If Dynamic Audience feature is enabled, then pass the audience parameters as mentioned below
 {
  template: TemplateType.GoogleResponsiveAd,
  autoGenerate: false,
  parameters: {
    BusinessName: "Cecilie apple juice",
    DisplayURL: "juice.com",
    Goal: "promote apple juice",
    StandoutCharacteristics: "Fresh apple juice",
    DynamicTargetAudienceSegment: "Young Adults",
    DynamicTargetAudience: "People between the age of 18 years to 40 years"
  }
}

// If Dynamic Audience feature is disabled, then pass the audience parameters as mentioned below
 {
  template: TemplateType.GoogleResponsiveAd,
  autoGenerate: false,
  parameters: {
    BusinessName: "Cecilie apple juice",
    DisplayURL: "juice.com",
    Goal: "promote apple juice",
    StandoutCharacteristics: "Fresh apple juice",
    TargetAudience: "school childern"
  }
}

// Internal Communication Email 
 {
    template: TemplateType.InternalCommunicationEmail,
    parameters: {
      Purpose: "Typeface Hub announcement",
      Content: "Announcement of Typeface Hub and its impact to internal employees",
      CTA: "you can contact me at hello@typeface.ai", // Its an optional field
      IsContentSourceUri: false, // provide this as true if you want the content to be generated from a URI, by default its false
      ContentUri: "www.typeface.ai", // provide the Uri from which content should be generated, IsContentSourceUri should be true
    },
    autoGenerate: false
}

// Outreach Email with Purpose OutreachEmailPurpose.InitialApplicationAcknowledgement
  {
    template: TemplateType.OutreachEmail,
    parameters: {
      Purpose: OutreachEmailPurpose.InitialApplicationAcknowledgement,
      RoleTitle: "Frontend Engineer",
      NextSteps: "HR will contact with a feedback",
      POC: "You can contact us at hr@typeface.ai"
    },
    autoGenerate: false
  }

// Outreach Email with Purpose OutreachEmailPurpose.JobOpportunityInquiry
  {
    template: TemplateType.OutreachEmail,
    parameters: {
      Purpose: OutreachEmailPurpose.JobOpportunityInquiry, 
      LinkedInProfileURL: "E.g. https://www.linkedin.com/in/john-doe-5978521a/",
      JobLinkURL: "E.g. https://www.typeface.ai/careers?gh_jid=4043036007",
      CTA: "you can contact me at hello@typeface.ai",
    },
    autoGenerate: false
  }

// Outreach Email with Purpose OutreachEmailPurpose.InterviewInvitation
  {
    template: TemplateType.OutreachEmail,
    parameters: {
      Purpose: OutreachEmailPurpose.InterviewInvitation, 
      InterviewDetails: "January 31, 4pm PST, Zoom", // date, time, place.
      RoleTitle: "Frontend Engineer",
      AdditionalInterviewDetails: "The interview will include a case to understand how you solve product problems",
      POC: "You can contact us at hr@typeface.ai"
    },
    autoGenerate: false
  }

// Outreach Email with Purpose OutreachEmailPurpose.InterviewFollowUp
  {
    template: TemplateType.OutreachEmail,
    parameters: {
      Purpose: OutreachEmailPurpose.InterviewFollowUp, 
      RoleTitle: "Product Manager",
      NextSteps: "We'd like you move to the next step, which will be a skills assessment",
      POC: "You can contact us at hr@typeface.ai"
    },
    autoGenerate: false
  }

// Outreach Email with Purpose OutreachEmailPurpose.InterviewSkillAssessment
  {
    template: TemplateType.OutreachEmail,
    parameters: {
      Purpose: OutreachEmailPurpose.InterviewSkillAssessment, 
      RoleTitle: "Frontend Engineer",
      SkillName: "Product management problem solving",
      AssessmentAccess: "Access your interviewee portal at www.typface.ai/portal and follow the instructions provided",
      Deadline: "E.g. April 2, 2025",
      POC: "You can contact us at hr@typeface.ai"
    },
    autoGenerate: false
  }

// Outreach Email with custom purpose
  {
    template: TemplateType.OutreachEmail,
    parameters: {
      Purpose: "Interview feedback summary",
      Context: "Discuss a potential job based on your profile",
      CTA: "If you're interested, please feel free to email me at hello@typeface.ai",
    },
    autoGenerate: false
  }
  
// HR LinkedIn Post with purpose HRLinkedInPostPurpose.PromoteAJobPosting
  {
    template: TemplateType.HRLinkedInPost,
    parameters: {
      Purpose: HRLinkedInPostPurpose.PromoteAJobPosting,
      CompanyName: "Typeface",
      JobLinkURL: "https://www.typeface.ai/careers?gh_jid=4043036007",
      CTA: "you can contact me at hello@typeface.ai",
    },
    autoGenerate: false
  }

// HR LinkedIn Post with purpose HRLinkedInPostPurpose.ShareACompanyUpdate
  {
    template: TemplateType.HRLinkedInPost,
    parameters: {
      Purpose: HRLinkedInPostPurpose.ShareACompanyUpdate,
      CompanyName: "Typeface",
      IsContentSourceUri: false, // provide this as true if you want the content to be generated from a URI, by default its false
      ContentUri: "www.typeface.ai", // provide the Uri from which content should be generated, IsContentSourceUri should be true
      ContentText: "Announcement of Typeface Hub and its impact to internal employees",
      CTA: "you can contact me at hello@typeface.ai",
    },
    autoGenerate: false
  }

// HR LinkedIn Post with purpose HRLinkedInPostPurpose.ProvideIndustryInsights
  {
    template: TemplateType.HRLinkedInPost,
    parameters: {
      Purpose: HRLinkedInPostPurpose.ProvideIndustryInsights,
      CompanyName: "Typeface",
      IsContentSourceUri: false, // provide this as true if you want the content to be generated from a URI, by default its false
      ContentUri: "www.typeface.ai", // provide the Uri from which content should be generated, IsContentSourceUri should be true
      ContentText: "Announcement of Typeface Hub and its impact to internal employees",
      CTA: "you can contact me at hello@typeface.ai",
    },
    autoGenerate: false
  }

// HR LinkedIn Post with purpose HRLinkedInPostPurpose.ShareADnIInitiative
  {
    template: TemplateType.HRLinkedInPost,
    parameters: {
      Purpose: HRLinkedInPostPurpose.ShareADnIInitiative,
      CompanyName: "Typeface",
      IsContentSourceUri: false, // provide this as true if you want the content to be generated from a URI, by default its false
      ContentUri: "www.typeface.ai", // provide the Uri from which content should be generated, IsContentSourceUri should be true
      ContentText: "Announcement of Typeface Hub and its impact to internal employees",
      CTA: "you can contact me at hello@typeface.ai",
    },
    autoGenerate: false
  }

// HR LinkedIn Post with purpose HRLinkedInPostPurpose.PublicizeARecruitmentEvent
  {
    template: TemplateType.HRLinkedInPost,
    parameters: {
      Purpose: HRLinkedInPostPurpose.PublicizeARecruitmentEvent,
      EventName: "React-Conf",
      EventDetails: "ReactJS Conference at Hulk auditorium, Mumbai, India",
      CTA: "you can contact me at hello@typeface.ai",
    },
    autoGenerate: false
  }

// HR LinkedIn Post with custom purpose
  {
    template: TemplateType.HRLinkedInPost,
    parameters: {
      Purpose: "Hiring Drive",
      CompanyName: "Typeface",
      ContentText: "Announcement of hiring drive on 25th Dec 2024",
      CTA: "you can contact me at hello@typeface.ai",
    },
    autoGenerate: false
  }

// Meeting Blend 
  {
    template: TemplateType.MeetingBlend,
    parameters: {
      Purpose: "Summarize",
      MeetingLinkUrl: "https://zoom.us/j/92813532129",
      Password: "12q4e%&gwafd@hb2123" // Optional
    },
    autoGenerate: false
  }

##Copilot Options

EnabledCoPilotOptions is an optional field where we can specify what all options will be shown in copilot if field is not provided all the default options will be shown.

// Enable copilot options in templates 

{
  template: TemplateType.TemplateName
  autogenerate: true or false 
  parameters: { 
    your template parameters..., 
    enabledCoPilotOptions: [  CoPilotOptionTypes.Summarize,
    CoPilotOptionTypes.MakeShorter,
    CoPilotOptionTypes.TextRefinement, ...] 
  }
}

Ask AI Question

More feature rich version of Ask AI a question is now available from new interface TypefacePluginWithDataPreProcessor. It shares signature with the default Iframe based plugin and provides additional functionality to run hooks before rendering content to customize the content.

{
  parameters: {
    welcomeMessage: "Welcome to Typeface AI Assistant. How can I help you today?",
    preRenderEnabled: (true | false)
  },
  // Implement preRender hook to customize the data before rendering it. 
  // `updatedContent` field will hold the customized content which will be used to render on Typeface App. 
  preRender: (data: PreRenderContentRequest) => {
    return Promise.resolve({
      id: data.id,
      type: data.type,
      content: data.content,
      updatedContent: `Customized message of ${data.content}.`
    });
  },
}

Text Analyzer

Text Analyzer can be used to generate brand specific values and tones by providing text as input Generate brand values and brand tones using TextAnalyzer usecase.

Output format

Blocks v1

If output format is set to blocks-v1, the content will be in the following format:

{
  "isoTime": "_iso_time_stamp_here ",
  "version": "blocks-v1",
  "blocks": [
    {
      "id": "__id_here_",
      "promptId": "_prompt_id_here_",
      "type": "Text",
      "blockUsage": "title",
      "data": {
        "content": "_text_here_"
      }
    },
    {
      "id": "__id_here_",
      "type": "Image",
      "blockUsage": "banner",
      "promptId": "_prompt_id_here_",
      "data": {
        "imageUrl": "_url_here_",
        "width": "image_width_here",
        "height": "image_height_here"
      }
    },
  ],
  "errors": []
}

blockUsage: Specifies the block content type (title, body, banner)

Template	BlockUsage
BlogPost	title, body, banner

Variations v1

If output format is set to variations-v1, the content will be in the following format:

{
  "isoTime": "2023-07-25T19:51:26.372Z",
  "version": "variations-v1",
  "variations": [
    {
      "id": "__id_here_",
      "type": "Text",
      "blockUsage": "body",
      "promptId": "_prompt_id_here_",
      "data": {
        "text": "_text_here_"
      }
    },
    {
      "id": "__id_here_",
      "type": "Image",
      "blockUsage": "banner",
      "promptId": "_prompt_id_here_",
      "data": {
        "imageUrl": "_url_here_",
        "width": "image_width_here",
        "height": "image_height_here"
      }
    }
  ],
  "errors": []
}

blockUsage: Specifies the variation content type (title, body, banner)

Error structure for the output format is set to blocks-v1 or variations-v1

[
    {
      "id": "__id_here_",
      "promptId": "_prompt_id_here_",
      "data": {
        "title": "_text_here_",
        "description": "_text_here_",
        "problemCategory": "_text_here_"
      }
    }
]

data.title: Describes the title of the error.

data.description: Provides a detailed description of the error.

data.problemCategory: Categorizes the error as either temporary or permanent or unknown.

Feed Items v1

If output format is set to feed-items-v1, the content will be in the following format:

{
  "isoTime": "2023-07-25T19:51:26.372Z",
  "version": "feed-items-v1",
  "feedItems": [{
    "id": "7e258b7b-fd6e-4f0d-812a-a99714288a52",
    "channel": "IMAGE",
    "audience": "_audience_here_",
    "type": "IMAGE",
    "content": {
      "imageUrl": "_url_here_"
    }
  }],
  "errors": []
}

JSON (Deprecated)

If output format is set to json, the content will be in the following format:

{
    "blocks": [
        // a list of blocks, each could one of the following types
        {
            "type": "Image",
            "data": {
                "imageUrl": "_url_here_" // temporary url for 24 hrs, download and persist in your system if needed
            }
        },
        {
            "type": "Title",
            "data": {
                "text": "_text_here_",
                "level": 1 // 1, 2, 3, 4, 5, 6
            }
        },
        {
            "type": "List",
            "data": {
                "items": ["_item_1_", "_item_2_"],
                "style": "ordered" // or "unordered"
            }
        },
        {
            "type": "Text",
            "data": {
                "text": "_text_here_"
            }
        }
    ]
}

Feed Blend and Image Studio

Feed Blend and Image studio is available from new interface TypefacePluginBlend. It shares signature with the default Iframe based plugin. parameters vary for feed edit and Image studio.

In case of feed blend.

{
  parameters: {
    // The feed item(Image) that is being edited,
    accountId: accountId?.trim(), 
    // Project to which the feed item belongs to,
    projectId: projectId?.trim(), 
    // Account to which the project belongs to,
    feedItemId: feedItemId?.trim(), 
    // Mode to open the dialog, 'edit'/EditorType.Edit for blend mode
    editorType: EditorType.Edit, 
    },
    outputFormat: TypefaceEmbedOutputFormat.FEED_ITEMS,
}

In case of image studio

{
  parameters: {
    // Account to which the project belongs to,
    accountId: accountId?.trim(),
    // Project to which the feed item belongs to, 
    projectId: projectId?.trim(), 
    // Mode to open the dialog, {EditorType.Studio} for blend mode
    editorType: EditorType.Studio, 
  }
  outputFormat: TypefaceEmbedOutputFormat.FEED_ITEMS,
}

Output formate

{
  "isoTime": "2023-12-06T07:54:11.302Z",
  "version": "feed-items-v1",
  "feedItems": [
    {
      "id": "_id_here_",
      "channel": "IMAGE",
      "audience": "Working Professionals in Hyderabad who are Coffee Lovers",
      "type": "IMAGE",
      "content": {
        "imageUrl": "_url_here_"
      },
      "createdAt": "2023-12-07T07:54:11Z",
      "modifiedAt": "2023-12-07T07:54:11Z",
      "createdBy": "_user_id_here_",
      "modifiedBy": "_user_id_here_",
      "links": [
        {
          "rel": "self",
          "href": "_url_here_"
        }
      ]
    }
  ],
  "errors": []
}

Asset Edit Mask

Asset edit mask is available from new interface TypefacePluginAssetEdit. It shares signature with the default Iframe based plugin.

{
  parameters: {
    {
      // Account to which the project belongs to,
      accountId: accountId?.trim(), 
      // The asset Id that is being edited,
      assetId: assetId?.trim(), 
      // The asset catalog Id to which asset belong to,
      assetCatalogId: assetCatalogId?.trim() 
    };
  }
}

@everything-registry/sub-chunk-944

1 month ago

1 month ago

3 months ago

3 months ago

3 months ago