APIs & Integrations

JMacasero
Contributor

Hubspot make use of pop-up email in contacts

Can anyone help me here? I have been stuck with this problem for 3 days. I joined the Slack community for help, but no one has responded.

 

I have an issue with the pop-up email in contacts. I asked if this is possible, and I was told it is, but I keep getting error codes that I can't resolve. I am creating a customized CRM card using the existing template from the command "hs project create." What I really want is a button that, when clicked, will open the pop-up email interaction/email editor in HubSpot contacts and copy the subject and body that I want to send in the email.

Screenshot from 2024-07-03 10-32-08.png


Here is what i did so far:
i have this file : Example.jsx 

 

import React, { useState, useEffect } from "react";
import {
  Button,
  hubspot,
} from "@hubspot/ui-extensions";

// Define the extension to be run within the Hubspot CRM
hubspot.extend(({ context, runServerlessFunction, actions }) => (
  <Extension
    context={context}
    runServerless={runServerlessFunction}
    sendAlert={actions.addAlert}
  />
));


const Extension = ({ context, runServerless, sendAlert }) => {
  const [loginState, setLoginState] = useState({
    token: null,
    personId: null,
    workEmail: null,
  });

  const handleSendEmail = async (email) => {
    try {
      const { response } = await runServerless({
        name: "emailEditor",
        parameters: {
          subject: "test subject",
          body: "test body",
          to: [{ email: email }],
        },
      });
    } catch (error) {
      console.error("Error opening email editor:", error);
    }
  };

  return (
    <Button
      type="submit"
      onClick={() => handleSendEmail(email)}
      variant="destructive"
    >
      Send Email
    </Button>
  );
};

export default Extension;

 

 

then i have a file on the app.functions:

open-email-editor.js:

 

 

const hubspot = require("@hubspot/api-client");
require("dotenv").config();

exports.main = async (context = {}) => {
  const { subject, body, to } = context.parameters;
  const hubspotToken = process.env.PRIVATE_APP_ACCESS_TOKEN;

  const hubspotClient = new hubspot.Client({
    accessToken: hubspotToken,
  });

  console.log(hubspotClient);

  try {
    await context.actions.openEmailEditor({
      subject,
      body,
      to,
    });

    return {
      statusCode: 200,
    };
  } catch (error) {
    console.error("Error opening email editor", error);

    return {
      statusCode: error,
    };
  }
};

 

 

Error opening email editor TypeError: Cannot read properties of undefined (reading 'openEmailEditor')

I really ran out of idea on how to do this. I am hoping to someone who could help to find a solution with my problem.

Here is my serverless.json:

 

 

{
  "appFunctions": {
    "myFunc": {
      "file": "example-function.js",
      "secrets": []
    },    
    "emailEditor": {
      "file": "open-email-editor.js",
      "secrets": []
    },
  }
}

 

 

 

 

 

 

0 Upvotes
2 Replies 2
NOlah
HubSpot Moderator
HubSpot Moderator

Hubspot make use of pop-up email in contacts

Hello @JMacasero,

Thank you for your question! Let's consult our experts to see if they have any suggestions for you.

 

Hello @miljkovicmisa, @ChrisoKlepke , @stefen, do you happen to have any ideas that could help @JMacasero with their goal?

 

Thank you all for contributing.

 

Best regards, 

Noémi

JMacasero
Contributor

Hubspot make use of pop-up email in contacts

Thank you for your response, @NOlah. I hope the tagged persons can help me.

0 Upvotes